String.rawを使いこなして、テンプレートリテラルをマスターしよう！

JavaScriptのString.rawについて

テンプレートリテラルとは？

従来の文字列リテラルとは異なり、複数行にわたって記述でき、変数や式を埋め込むことができる文字列です。

const name = "Alice";
const age = 20;

const message = `こんにちは、${name}さん！あなたは${age}歳ですね。`;

console.log(message); // こんにちは、Aliceさん！あなたは20歳ですね。

String.rawの役割

テンプレートリテラルでは、エスケープシーケンス（例：\n）は改行文字などに変換されます。しかし、String.raw を使用すると、エスケープシーケンスがそのまま解釈されます。

const str = String.raw`
  \n
  これは改行文字を含む文字列です。
`;

console.log(str); // \\n
  これは改行文字を含む文字列です。

上記のように、\n は改行文字ではなく、\\n という文字列として出力されます。

String.rawの主な用途

• パス名やファイル名など、エスケープシーケンスをそのまま保持したい場合
• 正規表現でエスケープシーケンスを使用する場合

String.rawの注意点

• テンプレートリテラル内の変数は、通常のテンプレートリテラルと同様に展開されます。
• String.raw は、テンプレートリテラルの最初の部分にのみ適用されます。

まとめ

String.rawのサンプルコード

const path = String.raw`C:\temp\file.txt`;

console.log(path); // C:\temp\file.txt

正規表現でエスケープシーケンスを使用

const regex = String.raw`/\n/g`;

const str = "This is a string with\nnewlines.";

console.log(str.replace(regex, "")); // This is a string withnewlines.

テンプレートリテラル内の変数

const name = "Alice";

const message = String.raw`Hello, ${name}!`;

console.log(message); // Hello, ${name}!

タグ付きテンプレートリテラル

const tagFunc = (strings, ...values) => {
  return strings.reduce((acc, str, i) => {
    return acc + str + (values[i] || "");
  }, "");
};

const message = String.raw`Hello, ${name}! You are ${age} years old.`;

console.log(tagFunc`Hello, ${name}! You are ${age} years old.`, name, age); // Hello, Alice! You are 20 years old.

複数行のテンプレートリテラル

const str = String.raw`
This is a string
with multiple lines.
`;

console.log(str); // This is a string
  with multiple lines.

String.rawの代替方法

エスケープシーケンスをそのまま記述

const path = "C:\\temp\\file.txt";

console.log(path); // C:\temp\file.txt

正規表現でエスケープシーケンスをエスケープ

const regex = /\n/g;

const str = "This is a string with\nnewlines.";

console.log(str.replace(regex, "\\n")); // This is a string with\\nnewlines.

テンプレートリテラルを使用せず、文字列を連結

const name = "Alice";
const age = 20;

const message = "Hello, " + name + "! You are " + age + " years old.";

console.log(message); // Hello, Alice! You are 20 years old.

タグ付きテンプレートリテラルを使用

const tagFunc = (strings, ...values) => {
  return strings.reduce((acc, str, i) => {
    return acc + str + (values[i] || "");
  }, "");
};

const message = `Hello, ${name}! You are ${age} years old.`;

console.log(tagFunc`Hello, ${name}! You are ${age} years old.`, name, age); // Hello, Alice! You are 20 years old.

その他の代替方法

• JavaScript のライブラリを使用して、テンプレートリテラルを処理する
• 自身の関数を作成して、テンプレートリテラルを処理する

これらの方法は、より高度な方法となります。

String.raw は、テンプレートリテラルのエスケープシーケンスをそのまま解釈するための便利なメソッドです。しかし、状況によっては他の方法の方が適している場合があります。