【JavaScript】文字列（String）の操作と主要メソッドの完全ガイド

2026年1月24日

概要

JavaScriptにおける文字列（String）は、Webページ上のテキスト表示やユーザー入力の処理など、最も頻繁に利用されるデータ型の一つです。

文字列を作成するには、シングルクォート '、ダブルクォート "、またはテンプレートリテラル（バッククォート `）を使用します。

本記事では、文字列の結合、切り出し、検索、置換といった基本的な操作を行うためのプロパティとメソッドを解説します。

仕様（入出力）

入力: 未加工のテキストデータ（例：ユーザー名、ファイル名、文章）
出力:
1. 結合や置換が行われた新しい文字列
2. 文字数や検索結果のインデックス（数値）
3. 分割された文字列配列

基本の使い方

文字列変数はプリミティブ型であり、一度作成するとその中身を直接書き換えることはできません（イミュータブル）。

そのため、加工を行うメソッドは常に「新しい文字列」を生成して返します。

文字列操作の主要プロパティ・メソッド一覧

メソッド・プロパティ	意味	戻り値の例 (“Hello World”)
`str.length`	文字数を取得	`11`
`str.slice(start, end)`	指定範囲を切り出し	`slice(0, 5)` $\rightarrow$ `"Hello"`
`str.indexOf(search)`	文字列を検索し位置を返す	`indexOf("o")` $\rightarrow$ `4`
`str.includes(search)`	文字列が含まれるか判定	`includes("World")` $\rightarrow$ `true`
`str.replace(old, new)`	文字列を置換する	`replace("World", "JS")` $\rightarrow$ `"Hello JS"`
`str.split(separator)`	指定文字で分割し配列にする	`split(" ")` $\rightarrow$ `["Hello", "World"]`
`str.trim()`	両端の空白を除去する	`" Hi ".trim()` $\rightarrow$ `"Hi"`

コード全文（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 Manipulation Demo</title>
    <script src="string-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>文字列操作の結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (string-demo.js)

実務でよくある「ファイルパスの解析」や「ユーザー入力の整形」を題材にしたコードです。

/**
 * 文字列操作のデモンストレーション
 */
const runStringDemo = () => {
    console.log('--- 1. 文字列の定義と結合 ---');
    
    const lastName = "Tanaka";
    const firstName = "Taro";
    
    // テンプレートリテラル（バッククォート）を使うと結合が容易です
    const fullName = `${lastName} ${firstName}`;
    console.log(`フルネーム: ${fullName}`); // "Tanaka Taro"
    console.log(`文字数: ${fullName.length}`); // 11


    console.log('--- 2. 切り出しと検索 (slice / indexOf) ---');
    
    const filePath = "/users/docs/report.pdf";
    
    // 拡張子 ".pdf" の位置を探す
    const extensionIndex = filePath.indexOf(".");
    console.log(`ドットの位置: ${extensionIndex}`); // 17
    
    // ドット以降の文字（拡張子）を切り出す
    // slice(開始位置) で末尾まで取得
    const extension = filePath.slice(extensionIndex); 
    console.log(`拡張子: ${extension}`); // ".pdf"


    console.log('--- 3. 置換と判定 (replace / includes) ---');
    
    const message = "Hello, Java!";
    
    // "Java" を "JavaScript" に置き換え
    // ※ replaceは最初の1つだけを置換します。すべて変えるなら replaceAll を使用
    const newMessage = message.replace("Java", "JavaScript");
    console.log(`置換後: ${newMessage}`);
    
    // 特定の単語が含まれているかチェック
    const hasScript = newMessage.includes("Script");
    console.log(`"Script" を含むか: ${hasScript}`); // true


    console.log('--- 4. 分割と空白除去 (split / trim) ---');
    
    const tagInput = "  HTML, CSS, JavaScript  ";
    
    // 前後の余分な空白を削除
    const cleanInput = tagInput.trim();
    console.log(`整形後: '${cleanInput}'`);
    
    // カンマ区切りで分割して配列にする
    const tags = cleanInput.split(",");
    console.log(tags); // ["HTML", " CSS", " JavaScript"]
};

// 実行
runStringDemo();

カスタムポイント

テンプレートリテラルの活用:従来の + 演算子による結合（"a" + "b"）よりも、`${a} ${b}` のようにテンプレートリテラルを使用した方が、改行や変数の埋め込みが直感的に記述でき、可読性が向上します。
大文字・小文字の変換:検索や比較を行う際、toUpperCase() や toLowerCase() を使って統一してから処理を行うことで、表記ゆれ（”Apple” と “apple” の違いなど）を吸収できます。

注意点

JavaScriptの文字列は「イミュータブル（不変）」です。str.replace(...) などのメソッドを実行しても、元の変数 str の中身は変わりません。加工した結果を利用したい場合は、必ず const newStr = str.replace(...) のように戻り値を別の変数で受け取る必要があります。

応用

パディング（桁埋め）によるフォーマット

日付や時間を表示する際、padStart メソッドを使うと「0埋め」が簡単に実装できます。

const hour = 9;
const minute = 5;

// 2桁になるように左側を "0" で埋める
const timeString = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;

console.log(timeString); // "09:05"