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); // ['りんご', 'バナナ', 'みかん']

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

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

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

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

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

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

文字列でよくあるミス

空白の除去：str.trim() で前後の空白を削除できます。フォーム入力の整形に便利です。すべて置き換えたいときはreplace()ではなくreplaceAll()メソッドを使います。

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

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

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

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

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

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

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

まとめ

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

あわせて読みたい記事

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