JavaScriptのStringオブジェクトのtrim()メソッドは、 文字列前後の空白を取り除きたい場合に使用します。
trim()の構文
文字列.trim()
戻り値は、文字列の前後の空白を除去した文字列です。
trim()を使った文字列自身の値は変わりません。(非破壊メソッドといいます)
trim()のサンプルコード
空白(半角)
空白(半角)を取り除きます。
// 前後に空白2つずつ
let str = ' hello ';
console.log('★' + str + '★'); // ★ hello ★
// trim()メソッド
console.log('★' + str.trim() + '★'); // ★hello★
文字列strの前後に空白(半角)が2つありますが、 trim()メソッドによって取り除かれているのがわかります。
わかりやすいようにconsole.log()の出力を「★」で囲んでいます。
タブ文字
タブ文字を取り除きます
let str = '\t hello! \t';
console.log('★' + str + '★'); // ★ hello! ★
console.log('★' + str.trim() + '★'); // ★hello!★
最初のconsole.log()は、タブ文字と空白が含まれているため、 間隔がかなり空いています。
2番目のconsole.log()は、タブ文字と空白が共に取り除かれています。
改行コード① (\n)
改行コード (\n)を取り除きます。
// 前後に改行コードと空白
let str = '\n hello \n';
console.log('★' + str + '★');
console.log('★' + str.trim() + '★');
// 実行結果 --------------
★
hello
★
★hello★
最初のconsole.log()の結果は、改行コードと空白が含まれているため、 3行に渡って出力されています。
2番目のconsole.log()の結果は、改行コードと空白が共に取り除かれ、 1行で表示されています。
改行コード② (\r\n)
キャリッジリターン(\r)を含む改行コード (\r\n)を取り除きます。
let str = '\r\n hello \r\n';
console.log('★' + str + '★');
console.log('★' + str.trim() + '★');
// 実行結果 --------------
★
hello
★
★hello★
最初のconsole.log()の結果は、キャッリッジリターンを含む改行コードと空白があるため、 3行に渡って出力されています。
2番目のconsole.log()の結果は、改行コードと空白が共に取り除かれ、 1行で表示されています。
全角空白
全角の空白を取り除きます。
(注意)
全角の空白については、ブラウザの種類やバージョンによっては対応していない場合があります。
let str = ' hello ';
console.log('★' + str + '★'); // ★ hello ★
console.log('★' + str.trim() + '★'); // ★hello★
全角空白に関しては、最新の主要ブラウザではほとんど対応していますが、 全てのブラウザで対応しているわけではないので注意が必要です。