JavaScript 文字列操作

文字列操作は、JavaScriptにおける最も基本的なスキルのひとつです。あらゆるアプリケーションにおいて「テキスト」は極めて重要なデータであり、これを自在に扱えるようになることは必須と言えます。

本章では、文字列を処理する2つの主要な手法、結合 (Concatenation) と テンプレートリテラル (Template Literals) について解説します。

1. 文字列結合 (String Concatenation)

文字列結合とは、2つ以上の文字列を組み合わせて1つの文字列を作るプロセスです。JavaScriptにおいて、文字列結合に最もよく使われるのは +（プラス）演算子 です。

1.1 基本的な結合

最もシンプルな形は、2つの文字列リテラルを繋ぐ方法です。

let greeting = "Hello";
let name = "World";
let message = greeting + " " + name + "!"; // スペースと感嘆符を組み合わせて結合
console.log(message); // 出力: Hello World!

この例では、+ 演算子が文字列 "Hello"、スペース " "、文字列 "World"、そして感嘆符 "!" を繋ぎ合わせ、最終的なメッセージ "Hello World!" を作成しています。

1.2 変数を使用した結合

文字列と、文字列値を保持している変数を結合することも可能です。

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // 出力: John Doe

ここでは、firstName と lastName という変数に格納された値の間にスペースを挟んで結合し、フルネームを作成しています。

1.3 他のデータ型との結合

JavaScriptは「型強制 (Type Coercion)」という特性を持つことで知られています。+ 演算子を「文字列」と「数値などの非文字列」に対して使用すると、JavaScriptは通常、非文字列の値を自動的に文字列へ変換してから結合します。

let age = 30;
let introduction = "私の年齢は: " + age;
console.log(introduction); // 出力: 私の年齢は: 30

この場合、数値の 30 は文字列 "私の年齢は: " と結合される前に、文字列 "30" へと変換されています。

重要なヒント:+ 演算子を使う際は、この型強制に注意してください。算術的な足し算を行いたい場合は、両方のオペランドが数値であることを確認する必要があります。そうでない場合、JavaScriptはそれらを文字列として扱い、結合操作を実行してしまう可能性があります。

1.4 ループ内での結合

結合は、ループ処理の中で動的に文字列を構築する際にも頻繁に使われます。

let numbers = [1, 2, 3, 4, 5];
let numberString = "";

for (let i = 0; i < numbers.length; i++) {
  numberString = numberString + numbers[i];
  if (i < numbers.length - 1) {
    numberString = numberString + ", "; // 数字の間にカンマとスペースを追加
  }
}

console.log(numberString); // 出力: 1, 2, 3, 4, 5

この例では、数値の配列をループで回し、それらをカンマとスペースで区切られた1つの文字列に結合しています。

2. テンプレートリテラル

テンプレートリテラル（またはテンプレート文字列）は、ECMAScript 6 (ES6) で導入された機能です。文字列の挿入 (Interpolation) や結合を、よりモダンで読みやすい方法で行うことができます。

これらは、シングルクォートやダブルクォートではなく、バックティック ( ` ) で囲むのが特徴です。

2.1 基本的なテンプレートリテラル

テンプレートリテラルでは、${expression} という構文を使って、文字列の中に直接式を埋め込むことができます。

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 出力: Hello, Alice!

この例では、変数 name が ${name} を通じて直接文字列の中に埋め込まれています。波括弧内の式が評価（解析）され、その値が文字列に挿入されます。

2.2 複数行の文字列

テンプレートリテラルを使用すると、エスケープ文字（\n）を使わずに、非常に簡単に複数行の文字列を作成できます。

let multilineString = `これは
複数行にわたる
文字列です。`;

console.log(multilineString);
/*
出力:
これは
複数行にわたる
文字列です。
*/

2.3 テンプレートリテラル内の式

${} プレースホルダー内には、任意の有効なJavaScriptの式を含めることができます。

let a = 10;
let b = 20;
let result = `${a} と ${b} の和は ${a + b} です。`;
console.log(result); // 出力: 10 と 20 の和は 30 です。

この例は、テンプレートリテラルの中で直接計算を実行できることを示しています。

2.4 タグ付きテンプレート - 概要

テンプレートリテラルは、タグ付きテンプレートという高度な形式でも使用できます。これは、テンプレートリテラルが評価される前に、関数を使ってその内容を処理できるようにする仕組みです。

function tag(strings, ...values) {
  console.log(strings);
  console.log(values);
  return "処理済み";
}

let name = "Bob";
let age = 25;
let taggedResult = tag`Hello, ${name}! あなたは ${age} 歳ですね。`;

console.log(taggedResult); // 出力: 処理済み

この例では、tag 関数が文字列部分と式の値を引数として受け取ります。タグ付きテンプレートは、ローカライズ（多言語対応）やセキュリティのためのエスケープ処理など、高度な文字列操作によく利用されます。

3. 比較：結合（+）vs テンプレートリテラル

テンプレートリテラルはその可読性と利便性から、現在では複雑な文字列操作におけるデファクトスタンダード（事実上の標準）となっています。一方で、非常にシンプルな文字列の連結には、今でも + 演算子が広く使われています。状況に応じて使い分けていきましょう！