More than 5 years have passed since last update.

JavaScriptで複数行の文字列や変数を扱うならテンプレート文字列が便利

Last updated at 2018-02-05Posted at 2016-02-05

TypeScript(またはJavaScript)でHTMLの複数行のコードを書く時等、複数行の文字列を扱う場合に下記のような書き方をしていませんか？

javascript

'<div id="hoge">'
+ 'ラーメン・つけめん・中本のタンメン'
+ '</div>';

シングルクォーテーション(')やプラス記号(+)を行ごとに書くのは面倒ですよね？ TypeScriptを使っているならバッククオート(`)を使って下記のように記述できます。ちなみにOS Xでバッククオートを入力するには[Shift]+[@]です。

typescript

`<div id="hoge">
ラーメン・つけめん・中本のタンメン'
</div>`;

バッククオートを使うのは複数行文字列の最初と最後だけで、わざわざ行ごとに閉じたりする必要はありません。便利なので複数行の文字列を使うならこちらを使いましょう。テンプレート文字列と言います。

(余談)
IDE「WebStorm」ではテンプレート文字列を使ってHTMLコードを記述した場合も、シンタックスハイライト、コード補完等が有効なので便利です。