JavaScriptのタグ付きテンプレート文字列

Mijikko.icon from 2025/09/21

たまに出てくるけどあんまり知名度高くなさそうなJavaScriptの機能

https://gyazo.com/12466ee7babe09187ce9d2a268b4bf98

文字列を関数で事前処理できるの強いな

よく調べてみたけど、C#のString.Format()みたいなことができるのか

なんかよくわかってなかった

ただ、key-valueでそのまま値を入れるには僅かばかりの工夫が必要そう

結構使い勝手良いんだけど、Google検索で一番上に出てくるサイトがあまり役に立たない

https://gyazo.com/47879e5db5fe84fc4a9f0ccb55bc13a4

１番目：書いてない

２番目：書いてるけどページ読みづらい

３番目：書いてるけど細かいし何できるのかいまいち分かりづらい

４番目：書いてない

こういうのって真っ先に侍エンジニア塾とか出てくるイメージだけど、出てこないんだな

初心者向け情報が皆無なのも知名度が低い要因な気がする

MDNのコードパクって使ってみたけど、こういうことできるのね。便利

code:templateWithTag.js

function template(strings, ...keys) {

return (...values) => {

const dict = valuesvalues.length - 1 || {};

const result = [strings0];

keys.forEach((key, i) => {

const value = Number.isInteger(key) ? valueskey : dictkey;

result.push(value, stringsi + 1);

});

return result.join("");

};

}

template${"greeting"}、私は${"myName"}です。貴方は${"yourName"}さんですね。よろしくお願いいた${"suffix"}。({

greeting: "こんにちは",

myName: "神",

yourName: "みじんこ",

suffix: "しません",

})

https://gyazo.com/1cdbfcd48ea3f260f35e971816c0c300

引数の中身は実装した関数側で定義するので、TypeScriptを用いた型定義も結構しっかりできそう