カテゴリ: 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でパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】