JavaScriptで文字列の両端の空白を取り除く「trim()」の使い方

文字列両端の空白を取り除くことをトリミングといいます。

trim()メソッドは文字列両端の空白を取り除き、新しい文字列を返すメソッドです。

取り除かれる空白文字の対象はスペース・タブ・改行文字です。

trim()メソッドは両端の空白を取り除くメソッドであり、文字列中の空白は取り除かないことに注意してください。

構文

メソッド意味返り値
文字列.trim();文字列の両端から「タブ・スペース・改行文字」を取り除く文字列
trim()メソッド

サンプルコード

入力フォームを用意して、文字列の両端に空白があってもそれを取り除いてくれるサンプルコードを紹介します。

Output

Pug
.container.my-5
 textarea.textarea
 p.output_string_not_trim
 p.output_string_trim 
JavaScript
/* テキストエリア */
let textarea = document.querySelector( '.textarea' );

/* 入力中を出力するための.classを取得*/
let output_string_not_trim = document.querySelector( '.output_string_not_trim' );
let output_string_trim = document.querySelector( '.output_string_trim' );

//文字数を反映(空白取り除いていない)
	output_string_not_trim.textContent = " 今日はとても良い天気ですね ";
	//文字数を反映(空白取り除き済み)
	output_string_trim.textContent = " 今日はとても良い天気ですね ".trim();


//テキストを入力居する度にonKeyUp()を実行
textarea.addEventListener('keyup', onKeyUp);

function onKeyUp() {
	// 入力テキスト
	const inputText = textarea.value;
	//文字数を反映(空白取り除いていない)
	output_string_not_trim.textContent = inputText;
	//文字数を反映(空白取り除き済み)
	output_string_trim.textContent = inputText.trim();
}

入力された文字列を出力する関数です。

「空白が取り除かれていない状態」と「取り除かれた状態」の両方を出力しています。

インストラクター
コメント

コメントを残す