1. 文字列リテラル
「文字列リテラル」 はプログラム内で文字の集まり(テキスト)を直接書く方法です。JavaScriptでは '...' / "..." / `...` の3種類で書けます。以下、例と一緒に順を追って説明します。
2. 書き方の基本
- シングルクォート
'...'とダブルクォート"..."は機能的に同じです。好きな方を使ってOK(ただしプロジェクトで統一するのが良い)。
let a = 'こんにちは';
let b = "Hello";
JavaScriptテンプレートリテラル(バッククォート) `...` は ES6 以降で使える強力な方式。改行や式の埋め込みが自然に書けます。
let t = `複数行も
そのまま書ける`;
JavaScript3. クォートを中に含めたいとき(よくあるパターン)
- 文字列中に
'を含めたい → 外側は"にする:
let s = "Tarou's watch";
JavaScript- 逆に
"を含めたい → 外側は'にする:
let s2 = '今日が "販売日" です';
JavaScript- 外側と同じクォートを使いたいときは エスケープ(バックスラッシュ
\):
let s3 = 'Tarou\'s watch';
let s4 = "今日が \"販売日\" です";
JavaScript4. エスケープシーケンス(よく使うもの)
\n: 改行(出力時に改行される)\t: タブ\\: バックスラッシュそのもの\'/\": クォートのエスケープ\uXXXX/\u{XXXXX}: Unicodeコードポイント(絵文字など)
console.log("行1\n行2"); // 出力は2行になる
console.log("バックスラッシュ: \\");
console.log("\u{1F600}"); // 😀(絵文字)
JavaScript5. テンプレートリテラルの便利さ(${…})
テンプレートリテラルは式の埋め込みと複数行そのままが特徴です。
let name = "花子";
let age = 20;
let msg = `${name}さんは${age + 1}歳です。`;
console.log(msg); // 花子さんは21歳です。
JavaScript複数行もそのまま:
let mail = `お客様へ
いつもありがとうございます。
— 店舗`;
JavaScript補足:バッククォート内でバッククォートを使う場合は “` のようにエスケープできます。
6. 文字列の基本操作(メソッド)
初心者がよく使うものを厳選して紹介します。
- 長さ:
str.length - 取得:
str[0]またはstr.charAt(0) - 検索:
str.indexOf("foo")(見つからないと -1) - 部分文字列:
str.slice(start, end)/str.substring(start, end) - 含むか:
str.includes("部分") - 先頭/末尾:
str.startsWith("h")/str.endsWith("!") - 置換:
str.replace("古い", "新しい")(最初の1つだけ) - 分割:
str.split(",") - 大文字小文字:
str.toUpperCase()/str.toLowerCase() - 余分な空白を削る:
str.trim()
let s = " Hello, JavaScript! ";
console.log(s.trim().toUpperCase()); // "HELLO, JAVASCRIPT!"
JavaScript7. 注意点(初心者がハマりやすいところ)
- 文字列は不変(immutable)
str[0] = 'A'のように中身を書き換えることはできません。新しい文字列を作って代入します。
let s = "abc";
s = "A" + s.slice(1); // 新しい文字列を作る
JavaScript- 長さ(.length)は UTF-16 のコードユニット数
絵文字や一部の特殊な文字は2つの「コードユニット」を使うので、lengthが期待より大きくなることがあります。絵文字を扱うときは注意(高度な話)。 - 改行を直接書くとエラー
'あ い'のようにリテラル内をそのまま改行すると構文エラー。テンプレートリテラルならOK。 new String(...)は避けるnew String("x")はオブジェクトを作るため、比較や型が面倒になることがあるので通常は使わない。
8. 覚えておくと便利な使い分け(おすすめ)
- 単純な短い文字列:どちらのクォートでもOK(プロジェクトスタイルに合わせる)
- 文字列中に
"か'が頻出する場合:もう片方のクォートで囲むかエスケープする - 値の埋め込み や 複数行の文章 を書くなら:テンプレートリテラル(バッククォート)を使う
練習問題
name = "太郎", score = 87 を使って 太郎さんの点数は87点です。 をテンプレートリテラルで作ってください。
答:
let name = "太郎", score = 87;
let out = `${name}さんの点数は${score}点です。`;
JavaScript文字列 "He said "Hello"." を正しく作るには?
答(どれでもOK):
let s = 'He said "Hello".';
// または
let s2 = "He said \"Hello\".";
JavaScript"A\nB" を画面に2行で表示するコードは?
console.log("A\nB");
// または
console.log(`A
B`);
JavaScript最後にひとこと
最初はクォートやエスケープで戸惑いやすいですが、テンプレートリテラル(`...`)を使えば式埋め込みや複数行が非常に楽になります。

