JavaScript/TypeScript では文字列内に ${foo} のように変数を展開する際、文字列をバッククォートで囲う必要がある。他のプログラミング言語では " などでそのまま変数を利用できるため、最初のうちは戸惑う事も多い。特に後から文字列内に変数を表示しようと思ったときなどは、クォート記号の変更を忘れてしまい思ったように動かない事もある。
エディタに VSCode を利用しているのであれば、Template String Converter という拡張機能を利用してみよう。
https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converterこの拡張機能を利用すると、文字列内に ${hoge} のような変数が表れた際に自動的に `(バッククォート) で文字列を囲うように置換してくれる。
この GIF アニメのように、文字列が " で囲われていても、その中に ${ が表れると ` に変換される。
シンプルな拡張機能だが、設定項目もいくつか用意されている。機能の有効/無効の切替やどの言語で拡張機能を動かすか、変換するクォート記号の指定、${ を削除したときの挙動など、細かな動作の変更を行うことができる。
自動的に変換してくれば変換忘れによるミスはほぼ無くなるだろう。JavaScript/TypeScript を扱う機会が多いのであればオススメだ。
Sponsored Link