JavaScriptで文字列を置換するときはreplaceAll()を使おうね！

JavaScriptで文字列の置換をする時は、今まで以下のどちらかの方法で置換していたかなと思います。

正規表現

正規表現のgを用いてグローバルマッチさせることで置換する。

'アラサーマークアップエンジニア'.replace(/アラサー/g, 'アラフォー');
// 'アラフォーマークアップエンジニア'

splitとjoinを駆使する。

splitで一度文字列を抜き取り、joinを使って該当箇所に置換したい文字を追加する。

'アラサーマークアップエンジニア'.split('アラサー').join('アラフォー');
// 'アラフォーマークアップエンジニア'

文字列を置換したいだけなのに、なんでこんな事しないといけないんだ！ということでES2021から、Stringにreplaceall()というメソッドが使えるようになります！というか現状モダンブラウザでは対応済みになっています。

JavaScriptの標準を決める団体、TC39のプロポーザルを確認すると、stage4となっていてES2021に入ります。

使い方

プロポーザルや、MDNのページにサンプルがありますが、以下のように使えます。

const text = '僕はアラサーマークアップエンジニアです。あっという間にアラサーからアラフォーエンジニアになってしまいますね。';
text.replaceAll('アラサー', 'アラフォー');
// "僕はアラフォーマークアップエンジニアです。　あっという間にアラフォーからアラフォーエンジニアになってしまいますね。"

上記の例は日本語なので、大文字小文字の区別がありません。大文字小文字を区別したい場合は、regexを使う必要があります。

const text = 'javascript javascript JavaScript';
const regex = /javascript/g;
const regex2 = /javascript/gi;

console.log(text.replaceAll(regex, 'TypeScript'));
// "TypeScript TypeScript JavaScript"

console.log(text.replaceAll(regex2, 'TypeScript'));
// "TypeScript TypeScript TypeScript"

今までの実装方法が染み付いてしまっているので、これからはreplaceAll()を使って老害にならないようにしたいと思います。