JavaScript | 文字列リテラルの記述方法

javascrpit JavaScript
スポンサーリンク

1. 文字列リテラル

「文字列リテラル」 はプログラム内で文字の集まり(テキスト)を直接書く方法です。JavaScriptでは '...' / "..." / `...` の3種類で書けます。以下、例と一緒に順を追って説明します。

2. 書き方の基本

  • シングルクォート '...' とダブルクォート "..." は機能的に同じです。好きな方を使ってOK(ただしプロジェクトで統一するのが良い)。
let a = 'こんにちは';
let b = "Hello";
JavaScript

テンプレートリテラル(バッククォート) `...` は ES6 以降で使える強力な方式。改行や式の埋め込みが自然に書けます。

let t = `複数行も
そのまま書ける`;
JavaScript

3. クォートを中に含めたいとき(よくあるパターン)

  • 文字列中に ' を含めたい → 外側は " にする:
let s = "Tarou's watch";
JavaScript
  • 逆に " を含めたい → 外側は ' にする:
let s2 = '今日が "販売日" です';
JavaScript
  • 外側と同じクォートを使いたいときは エスケープ(バックスラッシュ \):
let s3 = 'Tarou\'s watch';
let s4 = "今日が \"販売日\" です";
JavaScript

4. エスケープシーケンス(よく使うもの)

  • \n : 改行(出力時に改行される)
  • \t : タブ
  • \\ : バックスラッシュそのもの
  • \' / \" : クォートのエスケープ
  • \uXXXX / \u{XXXXX} : Unicodeコードポイント(絵文字など)
console.log("行1\n行2"); // 出力は2行になる
console.log("バックスラッシュ: \\");
console.log("\u{1F600}"); // 😀(絵文字)
JavaScript

5. テンプレートリテラルの便利さ(${…})

テンプレートリテラルは式の埋め込み複数行そのままが特徴です。

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!"
JavaScript

7. 注意点(初心者がハマりやすいところ)

  • 文字列は不変(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

最後にひとこと

最初はクォートやエスケープで戸惑いやすいですが、テンプレートリテラル(`...`)を使えば式埋め込みや複数行が非常に楽になります。

タイトルとURLをコピーしました