JavaScriptの文字列操作入門【初心者向け】

JavaScript 文字列の操作とは？

プログラムでは文字を扱う場面がとても多くあります。名前の表示・入力チェック・テキストの加工など、JavaScript 文字列の操作は必須のスキルです。

JavaScriptの文字列（string・ストリング）は 'シングルクォート' または "ダブルクォート" で囲んで書きます。

const name = '田中太郎';
const message = "こんにちは！";
console.log(name);    // 田中太郎
console.log(message); // こんにちは！

よく使う文字列の操作

文字数を調べる：length

const name = '田中太郎';
console.log(name.length); // 4（文字数）

文字列を切り出す：slice()

const str = 'プログラミング入門';
console.log(str.slice(0, 5)); // プログラミ（0文字目から5文字）
console.log(str.slice(5));    // ング入門（5文字目以降）

文字列が含まれるか調べる：includes()

const text = 'JavaScriptは楽しい';
console.log(text.includes('JavaScript')); // true
console.log(text.includes('Python'));     // false

文字列を置き換える：replace()

const str = 'こんにちは、田中さん！';
const newStr = str.replace('田中', '鈴木');
console.log(newStr); // こんにちは、鈴木さん！

文字列を分割する：split()

const csv = 'りんご,バナナ,みかん';
const fruits = csv.split(',');
console.log(fruits); // ['りんご', 'バナナ', 'みかん']

👉 localStorage入門も参考にしてください。

テンプレートリテラル：変数を文字列に埋め込む

テンプレートリテラルは、バッククォート（`）で囲み、${変数} の形で変数を文字列に埋め込む書き方です。

const name = '田中';
const age  = 15;

// 従来の書き方（+で連結）
console.log('こんにちは、' + name + 'さん。' + age + '歳ですね。');

// テンプレートリテラル（読みやすい）
console.log(\`こんにちは、\${name}さん。\${age}歳ですね。\`);

🔥 JavaScriptとは？初心者向け解説で実践してみましょう。

文字列でよく使うテクニック

文字列を扱うとき、よく使うテクニックを紹介します。

テクニック1：文字列の長さを調べる

lengthプロパティを使うと、文字列の文字数がわかります。たとえば「こんにちは」のlengthは5です。入力フォームで「10文字以内で入力してください」というチェックに使えます。

テクニック2：文字列を結合する

プラス記号（+）を使うと、2つの文字列をつなげられます。「こんにちは」+「世界」で「こんにちは世界」になります。テンプレートリテラル（バッククォートで囲む書き方）を使えば、変数を文字列の中に埋め込むこともできます。

テクニック3：文字列を検索する

includesメソッドを使うと、文字列の中に特定の文字が含まれているか調べられます。結果はtrue（含まれている）かfalse（含まれていない）で返ってきます。検索機能を作るときに便利です。

テクニック4：文字列を分割する

splitメソッドを使うと、文字列を指定した区切り文字で分割して配列にできます。たとえばカンマ区切りのデータを1つずつ取り出すときに使います。

テクニック5：文字列を置換する

replaceメソッドを使うと、文字列の一部を別の文字に置き換えられます。最初に見つかった1つだけが置き換わります。すべて置き換えたいときはreplaceAllメソッドを使います。

文字列でよくあるミス

ミス1：シングルクォートとダブルクォートの混在

文字列を囲む引用符は、開始と終了で同じものを使う必要があります。シングルクォートで始めたらシングルクォートで閉じましょう。

ミス2：数値と文字列の足し算

「5」+3は「53」になります。文字列と数値をプラスで結合すると、数値が文字列に変換されてつながってしまいます。計算したいときはNumber()で数値に変換してから足しましょう。

ミス3：文字列は変更できない

JavaScriptの文字列は一度作ると中身を変更できません。replaceやtoUpperCaseなどのメソッドは、元の文字列を変えるのではなく、新しい文字列を返します。結果を変数に入れ直すのを忘れないようにしましょう。

文字列の操作は、ウェブアプリのあらゆる場面で使います。ユーザーが入力した名前を表示したり、検索キーワードを処理したり、日付を見やすい形に整えたりするのも、すべて文字列操作です。基本をしっかり覚えておきましょう。

まとめ

JavaScriptの基礎はJavaScript入門で復習できます。

あわせて読みたい記事

• JavaScriptとは？初心者向け解説 — JS基礎に戻る
• JavaScript変数入門 — 文字列を変数に格納
• JavaScript配列入門 — split()で配列に変換
• JavaScript DOM操作入門 — 文字列をHTMLに表示
• JavaScriptループ入門 — 文字列を1文字ずつ処理
• JavaScript関数入門 — 文字列処理を関数にまとめる