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

javascrpit JavaScript
2018.01.04
スポンサーリンク

1. 文字列って何？

文字列（String）は文字の並び（例: "こんにちは", 'hello'）を扱うデータ型です。JavaScript の文字列は Unicode（UTF-16）で表現され、日本語も問題なく扱えます。

2. 文字列リテラルの書き方（’ ” ` の違い）

  • シングルクォート '...' とダブルクォート "..." は同じ。（どっちを使ってもOK）
  • ES6 から使える テンプレートリテラル `...` は、変数埋め込みや複数行が楽になります。

例：

let a = 'こんにちは';
let b = "Hello";
let c = `値は ${a} です`;  // 埋め込みができる
console.log(a, b, c);
JavaScript

出力:

こんにちは Hello 値は こんにちは です
JavaScript

テンプレートリテラルのポイント：

  • ${...} の中に式を書ける（変数＋計算など）。
  • ソース上でそのまま改行できる（複数行文字列が簡単）。

3. 文字列内にクォーテーション（’ や “）を含めたいとき

方法は主に2つ：

  • 外側と内側で違うクォートを使う：
let s1 = "Tarou's watch";
let s2 = '彼は「こんにちは」と言った';  // 日本語の引用符は例
JavaScript
  • バックスラッシュでエスケープする：
let s3 = 'Tarou\'s watch';    // シングル内のシングルをエスケープ
let s4 = "He said \"Hi\".";   // ダブル内のダブルをエスケープ
JavaScript

また、バックスラッシュ自体を文字として使いたいときは \\ 。

4) よく使うエスケープシーケンス（覚えると便利）

  • \n → 改行
  • \t → タブ（インデント）
  • \\ → バックスラッシュ \
  • \' 、 \" → クォートのエスケープ
  • \uXXXX → Unicode を 16 進で指定（例: \u3042 = ‘あ’）

例：

console.log('1行目\n2行目');
console.log('タブ:\t次の列');
console.log('バックスラッシュ: \\');
console.log('\u3042'); // => あ
JavaScript

5. テンプレートリテラルの詳しい使い方（超便利）

  • 文字列内に変数や式をそのまま埋め込める：`合計は ${a + b} です`
  • 複数行をそのまま書ける（改行を含む文字列が楽）：
let name = '花子';
let price = 120;
console.log(`こんにちは ${name}
今日の値段は ${price * 1.1}（税込）です`);
// 改行もそのまま出る
JavaScript

テンプレートでの注意：

  • バッククォート ` 自体を含めたいときはエスケープ（“`）か別の方法を使う。

6. 文字列の結合（つなげる）

  • + 演算子で結合：
let a = 'Hello, ' + 'World!';
JavaScript
  • テンプレートリテラルの方が読みやすいことが多い：
let name = '太郎';
let msg = `やあ、${name}さん`;
JavaScript

7. よく使う文字列操作メソッド（初心者に便利なもの）

let s = "  Hello World  ";
s.length            // 文字数（空白も含む）
s.trim()            // 両端の空白を削除
s.toLowerCase()     // 小文字に
s.toUpperCase()     // 大文字に
s.indexOf('World')  // 指定文字列の最初の位置（見つからなければ -1）
s.includes('Hello') // true/false（含むかどうか）
s.startsWith('He')  // 先頭一致
s.endsWith('ld')    // 末尾一致
s.slice(2, 7)       // 部分文字列（開始位置, 終了位置（未満））
s.replace('World', 'JS') // 置換（最初の1箇所だけ）
s.replaceAll('l', 'L')   // すべて置換（ブラウザによっては非対応あり）
JavaScript

8. 文字列と配列の関係（分割・結合）

  • split で分割 → 配列に：
let csv = 'りんご,みかん,バナナ';
let arr = csv.split(','); // ['りんご','みかん','バナナ']
JavaScript
  • join で配列を結合：
let joined = arr.join(' | '); // 'りんご | みかん | バナナ'
JavaScript

9. よくある落とし穴（初心者がつまずきやすい点）

  • クォートの混在で構文エラー：外側と内側を間違えるとエラーになります。
    → 'I'm fine' はエラー。"I'm fine" または 'I\'m fine' にする。
  • 改行をそのまま書くと構文エラー（テンプレートリテラルを使わない場合）。
    普通の '...' の中で改行キーを入れるとエラーになります。改行が必要なら \n を使うか `...` を使いましょう。
  • 数値と文字列の +：'2' + 3 は '23' になり、数値計算にならない。足し算をしたいときは Number() で変換するかテンプレートを使う。

10. 実践的な例題（手を動かして学べます）

例題 1 — 名前と年齢を表示
入力された name と age を受け取り こんにちは、{name}さん。あなたは{age}歳です。 と表示するコード（テンプレートリテラル使用）：

function greet(name, age) {
  return `こんにちは、${name}さん。あなたは${age}歳です。`;
}
console.log(greet('花子', 25));
// => こんにちは、花子さん。あなたは25歳です。
JavaScript

例題 2 — CSV を読み込んで HTML のリストに変換

let csv = 'りんご,みかん,バナナ';
let arr = csv.split(',');
let html = '<ul>\n' + arr.map(item => `  <li>${item}</li>`).join('\n') + '\n</ul>';
console.log(html);
/* 出力
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>
*/
JavaScript

例題 3 — 文字列内の全ての改行を <br> に置換

let text = "1行目\n2行目\n3行目";
let html = text.replaceAll('\n', '<br>');
console.log(html); // "1行目<br>2行目<br>3行目"
JavaScript

（replaceAll が使えない環境では text.split('\n').join('<br>')）

11. 練習問題

  1. 文字列 'abc' を 'a-b-c' に変換するコードを書いてみよう。
  2. ユーザー入力（例: ' Alice '）の両端の空白を取り、Hello, Alice! と出力する関数を作ろう。
  3. price = 500 を 税込価格: 550円 のように表示する（テンプレートリテラルを使う）。

※ 必要なら解答もすぐ出します — 先に自分でやってみると力がつきます！

まとめ（覚えておきたいこと）

  • ' と " は同じ。テンプレート ` はより便利（埋め込み・複数行）。
  • クォートの中に同じ種類のクォートを入れるときは エスケープ（\）を使うか、外側を変える。
  • \n, \t などのエスケープを覚えておくと便利。
  • 文字列操作は split, join, slice, replace, includes, trim あたりをまず覚えると実用的。
前へ次へ
1234
スポンサーリンク
タイトルとURLをコピーしました