JavaScript trim 文字列の先頭末尾の空白を取り除く

JavaScriptのtrimメソッドで、文字列の先頭と末尾の半角空白を取り除くサンプルです。

目次

サンプル trimとは
  先頭と末尾の空白を取り除く(trim)
  文字列の中にある半角空白も取り除く(replace)
  先頭の空白を取り除く(trimStart)
  末尾の空白を取り除く(trimEnd)

trimとは

str.trim()
  • 文字列の先頭と末尾の半角空白を取り除きます。
    →全角空白も取り除きます。
  • 空白が複数の場合、複数の空白を取り除きます。
  • 先頭と末尾以外にある空白は取り除きません。

 

先頭と末尾の空白を取り除く(trim)

文字列の先頭と末尾の半角空白を取り除くサンプルです。
コード中のコメントにある△は半角空白で□は全角を表しています。

<script>
  // 半角空白あり
  const str1 = " あいう +1  "; //"△あいう +1△△"
  console.log(str1.trim()); // "あいう +1"

  // 全角空白あり
  const str3 = " あいう +1 "; //"□あいう△+1□"
  console.log(str3.trim()); // "あいう +1"

</script>

4行目は、trimメソッドで先頭の半角空白と末尾の連続した半角空白を取り除いています。
文字列の中にある空白は削除しません。
8行目は、先頭と末尾の全角空白を取り除きます。

 

文字列の中にある半角空白も取り除く(replace)

文字列.replace (文字or 正規表現 , 置換後の文字or関数);

指定した1文字を別の1文字に置換します。空白も置き換えできます。

<script>
  // 半角空白あり
  const str1 = " あ い う +1  "; // "△あ△い△う△ +1△△"
  
  const str2 = str1.replace(/\s/g, "");

  console.log(str2); // "あいう+1"

</script>

文字列の中にある半角空白を取り除くには、
1つ目の引数を半角空白(正規表現)にして、2つ目の引数を空文字にします。
\sは、半角空白を表します。
/gは正規表現のオプションでマッチしたものを全て返します。

 

先頭の空白を取り除く(trimStart)

<script>
  // 半角空白あり
  const str1 = " あいう +1  "; //"△あいう +1△△"
  console.log(str1.trimStart()); // "あいう +1△△"
  console.log(str1.trimStart().length); // 8

  // 全角空白あり
  const str3 = " あいう +1 "; // "□あいう△+1□"
  console.log(str3.trimStart()); // "あいう△+1□"
  console.log(str3.trimStart().length); // 7
</script>

 

末尾の空白を取り除く(trimEnd)

<script>
  // 半角空白あり
  const str1 = " あいう +1  "; //"△あいう +1△△"
  console.log(str1.trimEnd()); // "△あいう +1"
  console.log(str1.trimEnd().length); // 7

  // 全角空白あり
  const str3 = " あいう +1 "; // "□あいう△+1□"
  console.log(str3.trimEnd()); // "□あいう△+1"
  console.log(str3.trimEnd().length); // 7
</script>

関連の記事

JavaScript 文字列を置換するサンプル(replace)

△上に戻る