JavaScriptのエスケープシーケンスの使い方をマスターしよう

1. エスケープシーケンスとは？

1. エスケープシーケンスとは？

エスケープシーケンスとは、文字列の中で特別な動作をする文字のことです。 文字列内で「改行」「タブ」「引用符」などを正しく表示させたいときに使います。 JavaScriptでは、バックスラッシュ（\）の後に特定の文字を書くことで表現します。

2. 代表的なエスケープシーケンス

2. 代表的なエスケープシーケンス

主なエスケープシーケンスをいくつか紹介します。

• \n : 改行を表します
• \t : タブ（空白）を表します
• \\ : バックスラッシュ自体を表示します
• \" : ダブルクオート（"）を文字列内で使うとき
• \' : シングルクオート（'）を文字列内で使うとき

3. 改行やタブを文字列に挿入する例

3. 改行やタブを文字列に挿入する例

改行やタブは文章や表を整えるときに便利です。 例えば、次のように使えます。

const message = "こんにちは\nJavaScriptの世界へようこそ！";
console.log(message);

const tabMessage = "名前:\t太郎\n年齢:\t20歳";
console.log(tabMessage);

こんにちは
JavaScriptの世界へようこそ！
名前:	太郎
年齢:	20歳

4. クオートを文字列内で使う

4. クオートを文字列内で使う

文字列をシングルクオートやダブルクオートで囲んでいる場合、同じ種類のクオートを文字列内で使いたいときにエスケープが必要です。

// ダブルクオートで囲んだ文字列内にダブルクオートを使う
const quote = "彼は言いました: \"こんにちは！\"";
console.log(quote);

// シングルクオートで囲んだ文字列内にシングルクオートを使う
const singleQuote = 'It\'s a sunny day.';
console.log(singleQuote);

彼は言いました: "こんにちは！"
It's a sunny day.

5. バックスラッシュ自体を表示する

5. バックスラッシュ自体を表示する

バックスラッシュはエスケープ文字として使われるため、そのまま表示したいときは二重に書きます。

const path = "C:\\Users\\Taro\\Documents";
console.log(path);

C:\Users\Taro\Documents

6. エスケープシーケンスを使った応用例

6. エスケープシーケンスを使った応用例

エスケープシーケンスは、長い文章や複数行のメッセージ、ログ出力、HTML文字列など、文字列を整えるときに非常に便利です。

const html = "<div class=\"card\">\n\t<p>こんにちは！</p>\n</div>";
console.log(html);

<div class="card">
    <p>こんにちは！</p>
</div>

このように、エスケープシーケンスを覚えておくと、文字列を自由にコントロールできるようになります。