【JavaScript入門】文字列

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

文字列

　JavaScript では文字を扱う処理が頻繁に登場します。Webページ上のテキストやユーザーが入力した文字列を扱うために、数値とは別の「文字列」という型が用意されています。ここでは、文字列の基本的な宣言方法や結合（連結）の仕方、そしてエスケープシーケンスの活用などを紹介します。

１．文字列型 (String)

　JavaScript では文字列は String 型として扱われます。文字列を直接プログラムに書く場合は「文字列リテラル」を使います。文字列リテラルは '（シングルクォート）か "（ダブルクォート）で囲って書きます。

構文	例	説明
`'文字列'`	`'ハロー'`	シングルクォートで囲む
`"文字列"`	`"こんにちは"`	ダブルクォートで囲む

同じクォートを文字列内で使いたいときは、エスケープシーケンスを使います。

２．エスケープシーケンス

　文字列内でクォート記号や改行などの特殊な文字を表現するために、\（バックスラッシュ）を使って書き方を工夫します。

\' ：シングルクォートを文字列内で使う
\" ：ダブルクォートを文字列内で使う
\\ ：バックスラッシュ自身を文字として使う
\n ：改行
\t ：タブ文字

　さらに、行末に \ を書いて改行すると、ソースコード上は複数行に分けても1行の文字列として扱われます。

// 例: 行末の \ による文字列の継続
const dessert = 'アイスクリームの\
盛り合わせ';

　上のコードで dessert は アイスクリームの盛り合わせ という文字列になります（改行やバックスラッシュは含まれません）。

３．文字列の結合

　文字列同士を繋げたい場合は + 演算子を使います。数値の足し算と同じ記号を使うので、プログラムを書くときには細心の注意が必要です。

文字列同士、あるいは文字列と他の値を + で繋ぐと、「文字列結合」が行われます。
どちらか一方が文字列なら、もう片方は文字列に変換された上で結合されます。

'イチゴ' + 'パフェ'    // => 'イチゴパフェ'
3 + '個'            // => '3個'
'お茶を' + 2        // => 'お茶を2'

　数値計算のつもりが、誤って文字列結合になってしまうミスがよく起こります。もし予定外の結果になったときは「片方が文字列だったかもしれない」と疑ってみましょう。

// 数値のつもりが、文字列になっている例
console.log(10 + '5'); // => '105'

４．サンプルHTMLファイル

　次の例では、文字列の作成やエスケープシーケンス、文字列結合の動きをコンソールに出力します。ファイル名を「stringExample.html」とします。

【stringExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>stringExample.html</title>
</head>
<body>
  <h1>文字列のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて、出力結果を確認してください。</p>

  <script>
    // 1. シングルクォートとダブルクォート
    const greet1 = 'こんにちは';
    const greet2 = "こんばんは";
    console.log("greet1:", greet1);
    console.log("greet2:", greet2);

    // 2. エスケープシーケンス
    // ダブルクォートと表示したい場合はシングルクォートで囲む
    const sentence = '彼はこう言った: "やあ、元気？"';
    console.log("sentence:", sentence);

    // \n を使った改行
    const multiLine = "これは1行目\nこれは2行目";
    console.log("multiLine:\n" + multiLine);

    // 行末の \ を使ってソースコード上で改行
    const dessert = 'チョコ\
      レート' + 'ケーキ';
    console.log("dessert:", dessert);

    // 3. 文字列結合
    const combo1 = 'コーヒーを ' + 2 + ' 杯ください。';
    console.log("combo1:", combo1);

    // 数値のつもりが文字列になる例
    const sumString = '2' + 5; // => '25'
    console.log("sumString:", sumString);

    // 4. 文字列と数値が混ざる例
    const price = 400;
    console.log("商品は" + price + "円です。");
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

greet1: こんにちは
greet2: こんばんは
sentence: 彼はこう言った: "やあ、元気？"
multiLine:
これは1行目
これは2行目
dessert: チョコ      レートケーキ
combo1: コーヒーを 2 杯ください。
sumString: 25
商品は400円です。

まとめ

JavaScript の文字列は ' ' か " " で囲みます。
文字列内で特殊文字を使うときは \（バックスラッシュ）によるエスケープシーケンスを利用します。
+ 演算子は数値の加算だけでなく文字列の連結にも使われるため、思わぬバグの原因になりがちです。
文字列同士をつなげるだけでなく、文字列と数値を連結するときにも注意が必要です。

　このように、JavaScript では文字列を操作する機会がとても多いので、文字列リテラルの書き方や結合の仕組みを覚えておくとスムーズに開発を進められます。