カテゴリ: JavaScript 更新日: 2025/11/20

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

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

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字列に改行やタブを入れたいときはどうすればいいですか?」

先生

「その場合はエスケープシーケンスを使います。特殊な文字を文字列の中で表す方法ですね。」

生徒

「エスケープシーケンスって聞いたことがありますが、具体的にはどんなものですか?」

先生

「文字列の中で普通に入力できない記号や特殊文字を、\\(バックスラッシュ)と組み合わせて書く方法です。順を追って説明しますね。」

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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


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

C:\Users\Taro\Documents

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

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

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


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

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

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

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScript × ES6の連携まとめ!安全でモダンなJavaScript開発の鍵
New2
TypeScript
TypeScriptの型システムとは?静的型付けのメリットと基本
New3
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New4
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの正規表現で文字列を置換する方法(replaceメソッド)
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する