JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのエスケープ文字とは？特殊文字のエスケープ方法と一覧を解説

エスケープ文字とは？

エスケープ文字とは、プログラム上で本来意図した意味とは別の特別な意味に解釈されてしまう文字のことです。たとえば、ダブルクォートやシングルクォート、改行コードなどが該当します。

こうした文字を「そのままの文字」として扱い、画面に出力したい場合には、直前にバックスラッシュ「\」を付けて記述します。この操作を「エスケープ処理」と呼びます。

JavaScriptの主なエスケープ文字一覧

コード意味・出力結果
\bバックスペース
\fフォームフィード
\n改行（ニューライン）
\rキャリッジリターン
\t水平タブ
\v垂直タブ
\'シングルクォート（'）
\"ダブルクォート（"）
\\バックスラッシュ（\）

バックスラッシュを使ったエスケープのサンプルコード

以下は、JavaScriptでバックスラッシュによるエスケープ処理を実装した具体例です。ダブルクォート・シングルクォート・バックスラッシュを1つの文字列内に混在させて出力しています。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Escape characters in JavaScript</h1>
<div class="result"></div>
<script>
    let str = 'Hello World \"This\" is some sample \\ Text \' ';
    let resEle = document.querySelector(".result");
    resEle.innerHTML = str;
</script>
</body>
</html>

実行結果

JavaScriptのエスケープ文字とは？特殊文字のエスケープ方法と一覧を解説

このように、文字列の中に引用符などを含めたい場合は、対象となる文字の直前に「\」を置くだけで、ブラウザはそれを通常の文字として正しく解釈してくれます。

まとめ

  • エスケープ文字は、意図しない意味に解釈される特殊文字のこと
  • 直前にバックスラッシュ「\」を付けることで、文字として出力できる
  • 代表的なものには \n（改行）、\t（タブ）、\'、\"、\\ などがある
  1. JavaScript正規表現における\wと\Wの違いとは？

    \w と \W の違い JavaScriptの正規表現において、\w と \W には重要な違いがあります。\w は「単語文字（ワードキャラクタ）」、つまり英数字やアンダースコアにマッチするのに対し、\W は「単語文字以外の文字（ノンワードキャラクタ）」、たとえば & や ^、% などの記号にマッチします。なお、\w は文字クラス [A-Za-z0-9_] と同等、\W はその否定である [^A-Za-z0-9_] と同等と考えると理解しやすいでしょう。以下で詳しく見ていきましょう。 構文1 new RegExp(\\w, g); 上記のコードは、JavaScriptで「単語文字」を検

  2. 【初心者向け】JavaScriptのescape()関数とは？使い方と非推奨の理由を解説

    JavaScriptのescape()関数とはJavaScriptのescape()関数は、文字列をエンコードするために使用される関数です。文字列内の特殊文字をASCII形式のエスケープシーケンス（%xx の形式）に変換します。ただし、この関数はECMAScript v3以降で非推奨（deprecated）とされており、現在の開発では使用が推奨されていません。URIのエンコード目的であれば、代わりにencodeURI()やencodeURIComponent()を使用することが標準的な方法です。escape()の使用例それでは、実際にJavaScriptのescape()関数を使用したサンプル