JavaScriptで文字列内のプレースホルダー($0、$1...)を配列の要素で置き換える方法

今回は、文字列を最初の引数として受け取り、その後に任意の個数の単語を受け取る関数 translate() を作成することを考えてみましょう。

対象となる文字列には、次のように複数の $ 記号(プレースホルダー)が含まれています。

This $0 is more $1 just a $2.
ここに、対応する位置を置き換えるための文字列が順に渡されます。

動作イメージ

たとえば、関数を次のように呼び出した場合:

translate('This $0 is more $1 just a $2.', 'game', 'than', 'game');

関数の出力は以下のようになります。

This game is more than just a game.

これは、いわばJavaScriptにおけるテンプレートへの値の埋め込み(テンプレート注入)に近い機能です。では、実際にこの関数のコードを書いてみましょう。

実装のポイント

ここでは String.prototype.replace() メソッドを使用します。replace() に正規表現パターンを指定してすべての出現箇所にマッチさせ、第2引数として関数を渡すと、マッチが見つかるたびにその関数が実行されるという仕組みを利用します。

コード例

const str = 'This $0 is more $1 just a $2';
const translate = (str, ...texts) => {
    const regex = /\$(\d+)/gi;
    return str.replace(regex, (item, index) => {
        return texts[index];
    });
};
console.log(translate(str, 'game', 'just', 'game'));

コードの解説

• 残余引数(...texts):2番目以降に渡されたすべての引数を、1つの配列として受け取ることができます。
• 正規表現 /\$(\d+)/gi:$ 記号とそれに続く1桁以上の数字にマッチします。括弧 () によって数字の部分がキャプチャされ、後続の処理で利用できます。
• 置換用コールバック関数:マッチが見つかるたびに呼び出され、キャプチャした数字をインデックスとして texts 配列から対応する単語を取り出し、元の文字列を置き換えます。

出力結果

コンソールには次のように表示されます。

This game is more just just a game

このように、replace() と正規表現を組み合わせるだけで、簡易的なテンプレート置換関数を短いコードで実装できます。プレースホルダーの形式やエラー処理を工夫すれば、より実用的なフォーマット関数へと発展させることも可能です。