テンプレートリテラルをIE11で使えるよう正規表現で置換する方法

IE11はテンプレートリテラル使用不可

テンプレートリテラル(テンプレート文字列)を使用すれば下記のように複数行文字列や文字列内挿機能を使用できるため便利である。

const NOW = new Date()
const YEAR = NOW.getFullYear()
const MONTH = NOW.getMonth() + 1
const DATE = NOW.getDate()
console.log(`${YEAR}年${MONTH}月${DATE}日`)
console.log(`Hello
World!`);

しかし残念ながらIE11やAndroidの4.xでは使用できないため、Babelを通さずに使用しているケースはほとんどないというのが現状だ。

テンプレートリテラルを正規表現で置換する

前述の下記のコードはIE11やAndroidの4.xでは使用できないためテンプレートリテラルを使用しない記述に書き換える必要がある。

しかし、手作業で1つずつ${YEAR}をYEARにして+を付けるなどの作業を行うのは時間がかかるし、ミスも発生しやすい。

console.log(`${YEAR}年${MONTH}月${DATE}日`)
console.log(`Hello
World!`);

Babelに通せば置換されるが、変数が含まれているものは、このように可読性が悪くなってしまうので一部だけ変えたいときなどは正規表現で置換したほうが良い。

// このように置換されてしまう
console.log("".concat(YEAR, "\u5E74").concat(MONTH, "\u6708").concat(DATE, "\u65E5"));

// 変数がなければBabelで問題ない
console.log("Hello\nWorld!");

テンプレートリテラル正規表現置換手順

まず該当するテンプレートリテラルを正規表現の「\$\{([^}]+)\}」で検索して「' + $1 + '」で置換する。

結果はこのようになる。

ただし、${a + b}のような計算が行われている場合は「' + ($1) + '」で置換する。

console.log(`' + YEAR + '年' + MONTH + '月' + DATE + '日`)

次に「`」を「'」に置換すればIE11やAndroidの4.xで使用できるコードになる。

console.log('' + YEAR + '年' + MONTH + '月' + DATE + '日')

特に必要のない空文字が残ることがあるので、気になる場合は「'' \+ | \+ ''」で検索して「」(空文字)で置換して削除する。

console.log(YEAR + '年' + MONTH + '月' + DATE + '日')

正規表現置換手順まとめ

console.log(`${YEAR}年${MONTH}月${DATE}日`) を正規表現の
「\$\{([^}]+)\}」 => 「' + $1 + '」 で置換

置換後は
console.log(`' + YEAR + '年' + MONTH + '月' + DATE + '日`)
になるのでさらに「`」を「'」で置換

console.log('' + YEAR + '年' + MONTH + '月' + DATE + '日')
になってIE11やAndroidの4.xで使用可能に。

空文字は不要なので削除するなら「'' \+ | \+ ''」を「」で置換して削除する。