【JavaScript】文字列の両端にある空白や改行を削除するtrimメソッド

2026年1月24日

概要

ユーザーの入力データやファイルから読み込んだテキストには、意図しない「前後の空白（スペース）」や「改行コード」が含まれていることがよくあります。 JavaScriptの trim() メソッドを使用すると、文字列の先頭と末尾にあるホワイトスペース（半角・全角スペース、タブ、改行）を一度にきれいに取り除くことができます。本記事では、基本的な空白削除の挙動と、文字列の途中にあるスペースがどう扱われるかについて解説します。

仕様（入出力）

入力: 前後にスペースや改行が含まれる文字列
出力: 余分な空白が除去された新しい文字列（コンソールログ）

基本の使い方

削除したい文字列に対して .trim() メソッドを実行します。このメソッドは元の文字列を変更せず、整形された新しい文字列を返します。

コード全文（HTML / JavaScript）

HTML (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Trim Demo</title>
    <script src="string-trim.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>trim()メソッドによる空白削除の結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (string-trim.js)

ユーザーから提供された例をベースに、誤字（cosnt, - など）を修正し、各パターンの挙動を明確にしたコードです。

/**
 * 文字列のトリミング処理デモ
 */
const runTrimDemo = () => {
    console.log('--- 1. 前後のスペース削除 ---');
    
    const targetString1 = "  こんにちは   ";
    // 前後の空白が削除されます
    const trimmedString1 = targetString1.trim();
    
    console.log(`[${targetString1}]`); // 原文: "  こんにちは   "
    console.log(`[${trimmedString1}]`); // 結果: "こんにちは"


    console.log('--- 2. 改行コードの削除 ---');
    
    // \n は改行を表します
    const targetString2 = "I ate apple\n";
    // 末尾の改行もホワイトスペースとして扱われ、削除されます
    const trimmedString2 = targetString2.trim();
    
    console.log(`原文の文字数: ${targetString2.length}`); // 12 (改行含む)
    console.log(`[${trimmedString2}]`); // "I ate apple"
    console.log(`処理後の文字数: ${trimmedString2.length}`); // 11


    console.log('--- 3. 文字列内部のスペース ---');
    
    const targetString3 = "  apple.   orange  ";
    // 両端は消えますが、単語間のスペースは維持されます
    const trimmedString3 = targetString3.trim();
    
    console.log(`[${trimmedString3}]`); // "apple.   orange"
};

// 実行
runTrimDemo();

カスタムポイント

片側だけ削除したい場合: 先頭（左側）だけ削除したい場合は trimStart()、末尾（右側）だけ削除したい場合は trimEnd() を使用します。
全角スペースの扱い: 現代のブラウザにおける trim() は、半角スペースだけでなく「全角スペース」も削除対象として認識します。

注意点

trim() メソッドは、あくまで「文字列の両端」にある空白のみを対象とします。したがって、文字列の内部（単語と単語の間など）にあるスペースを取り除くことはできません。もし文字列内のすべてのスペース（内部含む）を削除したい場合は、replaceAll(" ", "") や正規表現を使用する必要があります。また、null や undefined に対して trim() を呼び出すとエラーになるため、変数が文字列であることを確認してから使用するのが安全です。

応用

入力フォームのバリデーション

ユーザーがフォームに誤ってスペースだけを入力した場合や、名前の前後にスペースを入れてしまった場合に、データをクレンジングする用途で頻繁に使われます。

const inputName = "   "; // ユーザーがスペースだけ入力した状態

// trim() してから判定することで、スペースのみの入力を「空」とみなせる
if (inputName.trim() === "") {
    console.log("名前を入力してください（スペースのみは不可）");
}