javascript ${}(テンプレートリテラル)をカスタマイズする

作成日 2021.05.22
更新日 2022.08.29
javascript
javascript

javascriptで変数を文字列内に埋め込むことができる${}(テンプレートリテラル)をカスタマイズするサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. カスタマイズ

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 104.0.5112.101

カスタマイズ

javascriptではテンプレートリテラルを、以下のように自作の関数を使用して、カスタマイズして利用することが可能です。
ここでは、テキストが「1」であれば「one」に変換して「2」であれば「two」、「3」であれば「three」に変換してます。

<input id="btn" type="button" value="ボタン"/>

<script>

'use strict';

document.getElementById('btn').onclick = function () { 
  let str = '123';
  console.log(h`${str}`);
}

function change(v) {

    if(!v) return '';

    v = v.replace(/1/g, ' one ');
    v = v.replace(/2/g, ' two ');
    v = v.replace(/3/g, ' three ');    
    
    return v;
}

function h(t, ...v) {
    let result = '';
    for (let i = 0, len = t.length; i < len; i++) {
        result += t[i] + change(v[i]);
    }
    return result;
}

</script>

use strictについてはこちら

実行結果

また、以下のコードを、

document.getElementById('btn').onclick = function () { 
  let str = '123';
  console.log(h`${str}`);
}

function change(v) {

    if(!v) return '';

    v = v.replace(/1/g, ' one ');
    v = v.replace(/2/g, ' two ');
    v = v.replace(/3/g, ' three ');    
    
    return v;
}

function h(t, ...v) {
    let result = '';
    for (let i = 0, len = t.length; i < len; i++) {
        result += t[i] + change(v[i]);
    }
    return result;
}

document.getElementByIdの省略化、forEach、アロー関数を使用して、簡潔に記述することもできます。

btn.onclick = () => {
  let str = '123';
  console.log(h`${str}`);
}

const change = (v) => {

  if (!v) return '';

  v = v.replace(/1/g, ' one ');
  v = v.replace(/2/g, ' two ');
  v = v.replace(/3/g, ' three ');

  return v;
}

const h = (t, ...v) => {
  let result = '';

  t.forEach(function (val, idx, arr) {
    
    result += arr[idx] + change(v[idx]);

  });
  
  return result;
}

アロー関数の使い方

document.getElementByIdの省略して記述する

for文を1行で記述する