jQuery トリム

  1. jQuery で $.trim(str) を使用して文字列をトリミングする
  2. JavaScript String.trim() メソッドを使用して文字列をトリミングする
jQuery トリム

jQuery は最も人気のある JavaScript ライブラリの 1つであり、書く量を減らし、より多くのことを行うというモットーが続きます。簡単に言うと、jQuery は JavaScript コードの長い行をより少ない行で作成することを保証します。

jQuery の $.trim(str) 関数は、意味のない空白、区切り、タブなどをすべて切り取ります。JavaScript で同様のメソッドを比較する場合は、String.trim() メソッドを使用します。

しかし、それらの動作原理にはいくつかの顕著な違いがあります。これは、例のセットでわかります。飛び込みましょう!

jQuery で $.trim(str) を使用して文字列をトリミングする

一般に、$.trim(str) 関数は、ケースの開発やその他のコーディング規約で広く使用されていました。しかし、JavaScript メソッド .trim() が導入されたとき、jQuery 関数はトリミングのタスクを実行するという唯一の目的を失いました。

どちらも同じように機能し、この場合の JavaScript はより正確です。

jQuery リリース 3.5.0 では、trim 関数は非推奨になり、JavaScript の str.trim() メソッドが推奨されました。この例では、2つの段落タグを持つ HTML 本文があります。

1つはトリミングされた値を取得し、もう 1つは元のメッセージを取得します。

ご存知のとおり、HTML はデフォルトで、段落の前後の未定義のスペースで機能します。したがって、$.trim(str) 関数がその役割を果たしているかどうかを認識できない可能性があります。

前後の文字列の長さを計算し、渡すメッセージと一緒に追加します。コードフェンスにジャンプしましょう。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<p id="text"></p>
<p id = "val"></p>
<script>
  var str = "\n   jQuery trimming        \n\n";
  $( "#text" ).html("Trimmed: " + $.trim(str) + $.trim(str).length);
  $( "#val" ).html("Original: " + str + str.length);
</script>

出力:

jQuery で$.trim(str)を使用して文字列をトリミングす

ここでは、余分なスペースを除いた後のトリミングされたメッセージの長さが 15 であることがわかります。しかし、文字列の元の印刷に気付いた場合、長さのカウントと文字列の間に一定のギャップがあります。

これはいくつかのスペースの問題を定義しますが、スペースの数と改行が存在することを明示的に示していません。

しかし、続いて、元のメッセージの長さがカウントされました。最初は、文字列が始まる前に 3つのギャップと 1つの改行があったことがわかっています。また、弦の後部には、2つの改行と 8つの空白がありました。

元のメッセージには有効な 15 文字しかなく、HTML 本文には意味のないギャップが表示されません。

JavaScript String.trim() メソッドを使用して文字列をトリミングする

JavaScript の場合、str.trim() メソッドは同様の出力パターンに応答します。この例では、文字列を取得してメソッドを実行します。

また、JavaScript メソッドと jQuery 関数が同様に推測するかどうかを確認します。コード行を確認してみましょう。

var str = '  Cut it off   ';

console.log($.trim(str));
console.log(str.trim());
console.log(str);

出力:

JavaScript String.trim メソッドを使用して文字列をトリミングします

調査によると、JavaScript メソッドと jQuery 規則を区別したい場合、JavaScript メソッドは str で機能し、jQuery 関数は str を使用すると言えます。

str.trim() メソッドは引数を取りませんが、$.trim(str) はパラメーターとして str を取ります。

また、JavaScript メソッドの未定義の変数はエラーを表示しますが、jQuery 関数はエラーをポップせずに空の文字列をプレビューします。したがって、JavaScript メソッドは定義された方法で実行されると言えます。

チュートリアルを楽しんでいますか? <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook