JavaScript trimを完全理解！5つの使い方とサンプルコード

はじめに
●JavaScript trimメソッドとは
- ○trimメソッドの基本
●trimメソッドの使い方
●注意点と対処法
●応用例とサンプルコード
- ○サンプルコード6：フォーム入力値の空白を削除
- ○サンプルコード7：CSVデータの空白を削除
まとめ

はじめに

この記事を読めば、JavaScriptのtrimメソッドを使って、文字列の空白を削除する方法が身につきます。

初心者でも分かりやすい解説と、実際に使えるサンプルコードを紹介します。

さらに注意点や応用例も紹介するので、JavaScriptで文字列を扱う際のスキルが向上します。

●JavaScript trimメソッドとは

JavaScriptで文字列の空白を削除するためには、trimメソッドが便利です。

trimメソッドは、文字列の両端にある空白を削除してくれるメソッドで、特にフォームの入力値を処理する際に重宝されます。

○trimメソッドの基本

trimメソッドは、文字列オブジェクトのメソッドとして使用されます。

const newString = oldString.trim();

ここで、oldStringは処理前の文字列、newStringは空白が削除された後の文字列です。

●trimメソッドの使い方

それでは、具体的な使い方やサンプルコードを見ていきましょう。

○サンプルコード1：文字列の両端の空白を削除

このコードでは、trimメソッドを使って、文字列の両端の空白を削除しています。

この例では、” Hello, World! “という文字列の両端にある空白を削除しています。

const str = " Hello, World! ";
const trimmedStr = str.trim();
console.log(trimmedStr); // "Hello, World!"

○サンプルコード2：文字列の左端の空白を削除

このコードでは、正規表現を使って、文字列の左端の空白を削除しています。

この例では、” Hello, World!”という文字列の左端にある空白を削除しています。

const str = " Hello, World!";
const trimmedStr = str.replace(/^\s+/, "");
console.log(trimmedStr); // "Hello, World!"

○サンプルコード3：文字列の右端の空白を削除

このコードでは、正規表現を使って、文字列の右端の空白を削除しています。

この例では、”Hello, World! “という文字列の右端にある空白を削除しています。

const str = "Hello, World! ";
const trimmedStr = str.replace(/\s+$/, "");
console.log(trimmedStr); // "Hello, World!"

○サンプルコード4：複数の文字列を扱う場合

このコードでは、配列内の複数の文字列の両端の空白を削除しています。

この例では、[” Hello, World! “, ” こんにちは、世界！ “, ” Hola, Mundo! “]という配列内の各文字列の両端にある空白を削除しています。

const strArray = [" Hello, World! ", " こんにちは、世界！ ", " Hola, Mundo! "];
const trimmedArray = strArray.map(str => str.trim());
console.log(trimmedArray); // ["Hello, World!", "こんにちは、世界！", "Hola, Mundo!"]

○サンプルコード5：正規表現を使ったカスタマイズ

このコードでは、正規表現を使ってカスタマイズしたtrimメソッドを作成しています。

この例では、文字列の両端にある数字を削除しています。

function customTrim(str) {
  return str.replace(/^\d+|\d+$/g, "");
}

const str = "123Hello, World!456";
const trimmedStr = customTrim(str);
console.log(trimmedStr); // "Hello, World!"

●注意点と対処法

trimメソッドは、空白文字だけでなく、タブや改行も削除します。

そのため、意図しない削除が発生する場合があります。

対処法として、正規表現を使ってカスタマイズしたtrimメソッドを作成することができます（サンプルコード5を参照）。

●応用例とサンプルコード

trimメソッドは、さまざまな場面で活用できます。

応用例とサンプルコードを紹介します。

○サンプルコード6：フォーム入力値の空白を削除

このコードでは、フォーム入力値の空白を削除しています。

この例では、ユーザーが入力したテキストの両端の空白を削除して、正しく処理できるようにしています。

<form>
  <input type="text" id="inputText" placeholder="テキストを入力してください">
  <button type="button" onclick="submitForm()">送信</button>
</form>

<script>
  function submitForm() {
    const inputText = document.getElementById("inputText").value.trim();
    console.log(inputText); // 入力値の両端の空白が削除された文字列
  }
</script>

○サンプルコード7：CSVデータの空白を削除

このコードでは、CSVデータの各セルの空白を削除しています。

この例では、CSVデータを解析し、各セルの両端の空白を削除して、正確なデータを取得するための処理を行っています。

const csvData = "Name, Age, Job\n John, 25, Engineer\n Jane, 30, Doctor";
const lines = csvData.split("\n");

const parsedData = lines.map(line => {
  const cells = line.split(",").map(cell => cell.trim());
  return cells.join(",");
});

console.log(parsedData.join("\n"));
// "Name,Age,Job\nJohn,25,Engineer\nJane,30,Doctor"

このサンプルコードでは、まずCSVデータを改行で分割し、各行を処理しています。

次に、各行をカンマで分割し、各セルの空白をtrimメソッドで削除しています。

最後に、セルをカンマで結合し、改行で結合して元のCSV形式に戻しています。