【JavaScript】文字列の操作を解説｜Webの基礎

記事内には広告が含まれます

2026年8月29日

はじめに

前回の記事では、<form>タグ（フォーム）をJavaScriptで操作する方法を解説しました。

今回は、フォームの入力値チェックや画面表示の整形など、あらゆる場面で使う文字列（String）の操作方法を解説します。文字列の検索、抽出、置換、分割・結合、大文字小文字の変換まで、実務でよく使うメソッドを中心に紹介します。

文字列の基本をおさらい

JavaScriptの文字列は、シングルクォート（'）・ダブルクォート（"）・バッククォート（`）のいずれかで囲んで作成します。

const s1 = 'こんにちは';
const s2 = "こんにちは";
const name = "田中";
const s3 = `こんにちは、${name}さん`; // テンプレートリテラル

console.log(s3); // こんにちは、田中さん
console.log(s3.length); // 文字列の長さ

バッククォートで囲む書き方はテンプレートリテラルと呼ばれ、${}の中に変数や式を埋め込めるのが特徴です。文字列の連結を+で書くよりも見た目がすっきりするため、実務では広く使われています。文字列の長さはlengthプロパティで取得できます。

文字列を検索する（includes・indexOf・startsWith・endsWith）

指定した文字列が含まれているかを調べるには、以下のメソッドを使います。

const text = "JavaScriptでフォームを操作する";

console.log(text.includes("フォーム")); // true（含まれていればtrue）
console.log(text.indexOf("フォーム")); // 11（見つかった位置。見つからなければ-1）
console.log(text.startsWith("JavaScript")); // true（先頭が一致するか）
console.log(text.endsWith("する")); // true（末尾が一致するか）

includes()は「含まれているかどうか」をtrue/falseで判定したいときに、indexOf()は「何文字目にあるか」まで知りたいときに使います。単に含まれているかを確認したいだけなら、位置を意識しなくてよいincludes()の方がシンプルです。

indexOf()は見つからない場合-1を返します。if (text.indexOf(“○○”) > -1)のような書き方も見かけますが、含まれているかどうかの判定だけならincludes()の方が意図が伝わりやすいです。

文字列を抽出する（slice・substring）

文字列の一部分だけを取り出すにはslice()またはsubstring()を使います。

const text = "JavaScript";

console.log(text.slice(0, 4)); // "Java"（0文字目から4文字目の手前まで）
console.log(text.slice(4)); // "Script"（4文字目から末尾まで）
console.log(text.slice(-6)); // "Script"（末尾から6文字）

console.log(text.substring(0, 4)); // "Java"（slice()と同じ結果）
console.log(text.substring(-6)); // "JavaScript"（負の値は0として扱われる）

slice()とsubstring()はよく似ていますが、負の値の扱いが異なります。slice()は負の値を「末尾からの位置」として扱えるのに対し、substring()は負の値を0として扱います。末尾から○文字を取り出したい場合はslice()を使うと簡潔に書けます。

文字列を置換する（replace・replaceAll）

文字列の一部を別の文字列に置き換えるにはreplace()・replaceAll()を使います。

const text = "りんご、りんご、みかん";

console.log(text.replace("りんご", "バナナ")); // "バナナ、りんご、みかん"（最初の1件だけ置換）
console.log(text.replaceAll("りんご", "バナナ")); // "バナナ、バナナ、みかん"（すべて置換）

replace()は最初に見つかった1件だけを置換する点に注意してください。文字列中のすべての一致箇所を置換したい場合はreplaceAll()を使います。どちらも元の文字列は変更されず、置換後の新しい文字列が返される点は他のメソッドと共通です。

replace()・replaceAll()は正規表現を第1引数に渡すこともできます。正規表現を使った柔軟な検索・置換については、このシリーズの後半で改めて解説予定です。

文字列を分割・結合する（split・join）

文字列を配列に分割するにはsplit()、配列を文字列に結合するにはjoin()を使います。

const csv = "山田,田中,佐藤";
const names = csv.split(","); // ["山田", "田中", "佐藤"]

console.log(names); // ["山田", "田中", "佐藤"]
console.log(names.length); // 3
console.log(names.join(" / ")); // "山田 / 田中 / 佐藤"

split("区切り文字")で文字列を配列に分解できるので、カンマ区切りの値をまとめて扱いたいときなどに便利です。逆に配列を1本の文字列にまとめたい場合はjoin("区切り文字")を使います。配列そのものの詳しい操作方法は、このシリーズの後半で改めて取り上げます。

前後の空白除去・大文字小文字の変換

フォームの入力値を整形する際によく使うメソッドです。

const input = "  Tanaka@Example.com  ";

console.log(input.trim()); // "Tanaka@Example.com"（前後の空白を除去）
console.log(input.trimStart()); // 先頭の空白のみ除去
console.log(input.trimEnd()); // 末尾の空白のみ除去

console.log(input.toLowerCase()); // "  tanaka@example.com  "（すべて小文字に）
console.log(input.toUpperCase()); // "  TANAKA@EXAMPLE.COM  "（すべて大文字に）

trim()は、ユーザーが入力欄に誤って入れてしまった前後の空白（全角・半角どちらも対象）を取り除くのに役立ちます。前回の記事で紹介したフォームの入力チェックと組み合わせて、「値をtrim()してから空文字かどうかを判定する」という使い方が実務では定番です。大文字・小文字を区別せずに比較したい場合は、toLowerCase()（またはtoUpperCase()）で両者を揃えてから===で比較します。

実務サンプル（キーワード検索＋一致箇所のハイライト表示）

入力したキーワードでリストを絞り込み、一致した部分をハイライト表示するサンプルです。ここまで紹介したtrim()・toLowerCase()・includes()・split()・join()をまとめて使います。

HTML

<input type="text" id="searchBox" placeholder="キーワードを入力">
<ul id="itemList">
    <li>Excel VBA入門</li>
    <li>Power Query活用</li>
    <li>JavaScript基礎</li>
    <li>Excel関数リファレンス</li>
</ul>

JavaScript（main.js）

document.addEventListener("DOMContentLoaded", () => {
    const searchBox = document.getElementById("searchBox");
    const items = document.querySelectorAll("#itemList li");
    const originalTexts = [...items].map((item) => item.textContent);

    searchBox.addEventListener("input", () => {
        const keyword = searchBox.value.trim(); // 前後の空白を除去

        items.forEach((item, index) => {
            const text = originalTexts[index];
            const isMatch = text.toLowerCase().includes(keyword.toLowerCase()); // 大文字小文字を区別せず判定

            item.style.display = keyword && !isMatch ? "none" : ""; // 一致しなければ非表示

            if (keyword && isMatch) {
                // 一致部分をsplit()で分割し、<mark>で囲んでjoin()し直す
                item.innerHTML = text.split(keyword).join(`<mark>${keyword}</mark>`);
            } else {
                item.innerHTML = text;
            }
        });
    });
});

inputイベントが発生するたびに、まずtrim()で入力値の前後の空白を除去し、toLowerCase()で大文字小文字を揃えたうえでincludes()により一致判定を行っています。一致しない項目はstyle.display = "none"で非表示にし、一致した項目はsplit()でキーワードの前後に分割してから<mark>タグを挟んでjoin()し直すことで、一致箇所だけをハイライト表示しています。

何も入力していない状態では、すべての項目がそのまま表示されます。