【JavaScript】 正規表現リテラルと文字列リテラルで￥(＼)の取り扱いの差

JavaScriptは、正規表現リテラルと文字列リテラルの二つの方法で正規表現をおこなうことができます。
パターン文字を検索したいとき\でエスケープする必要がありますが、正規表現リテラルと文字列リテラルでは記述方法が異なります。

. や * などのメタ文字を検索するときは、\でエスケープする必要があります。

次のように、正規表現リテラルでのパターンは分かりやすいと思います。

// 小数点以下を抜き出したい

const reg1 = /.\d*/; // ← . にエスケープなし
console.log( "123.456".match( reg1 ) ); // "123" ←失敗

const reg2 = /\.\d*/; // ← . にエスケープあり
console.log( "123.456".match( reg2 ) ); // ".456" ←成功

しかし、文字列リテラルの場合、同じ記述ではうまくいきません。

const reg = new RegExp( "\.\d*" );
console.log( "123.456".match( reg ) ); // "1" ←期待した結果ではない

文字列リテラルでエスケープする場合は、次のように\を二つ入力します。

"\." → "\\."

const reg = new RegExp( "\\.\\d*" );
console.log( "123.456".match( reg ) ); // ".456"

上記の例では、\dも \\d に書き換えています。
\D , \s なども、\を二つ入力する必要があります。

※ブラウザでユーザーが入力した文字や、サーバーとの通信で取得した文字などはそのまま使用できます。

<script>

window.addEventListener( "DOMContentLoaded" , ()=> {
    const inTag = document.getElementById("in");

    inTag.addEventListener("change",()=>{
            const reg = new RegExp( inTag.value );
            console.log( "abc?123".match( reg ) );
        });
});
</script>
<input  type="text" id="in" >

上の例で表示される入力欄に \? と入力すると、その下に ? が表示されます。

正規表現で検索対象とするとき、エスケープが必要な文字を挙げてみます。

( ) は前後共にエスケープが必要です。
それに対して、[ ] と { } は閉じカッコにエスケープが必要ありません。
しかし、エスケープしても動作します。

正規表現リテラルでは\が一つで済むのに、なぜ文字列リテラルは二つ必要なのでしょうか。

まずは文字列リテラルの仕組みを知る必要があります。

JavaScriptのシステムがスクリプトコードを読み込む際、文字列リテラルは文字列データに変換されます。
そのとき、\nなどのエスケープ文字を表す文字列は、内部的に一つの文字データに変換されます。

では、"\."や"\?"はどうなるのでしょうか。

こちらは、\が消えて "." や "?" に変換されます。

new RegExp( ) は、変換後の文字を正規表現パターンとして処理します。

つまり、"\."は . という正規表現パターンとして処理されます。
"\?"は ? です。
エスケープは消えているので、適用されないのです。

エスケープとして適用するには、文字列データ内に \ を残す必要があります。

\ を残すには、次表のように \を二つ続けて入力します。

このデータをnew RegExp( )が解釈すると、エスケープが適用されます。