JavaScriptのテンプレートストリングは、前回の記事の「console.log」と組み合わせるととても便利ですし、また、単独でも便利な機能です。
テンプレートストリングはES2015/ES6 と呼ばれる最新のJavaScriptで導入されている新しい機能なので、紹介される機会が少ないのであまり知られていないのですが、最新に導入されるくらい便利で使い勝手のよいものです。
文字列を出力するときに、変数の内容を差し込んでいれることができる機能です。
動作させてみましょう。
動作環境を整えるのは、前回紹介したのと同じですね。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="index.js"></script> </head> <body> Text </body> </html> |
|
1 2 3 4 5 6 7 |
var a = 100; var b = 'abc'; console.log(` テンプレートストリングの動作確認です Aの値は ${a} / Bの値は ${b} です `); |
このように動作します。
|
1 |
テンプレートストリングの動作確認です Aの値は 100 / Bの値は abc です |
テンプレートストリングは、記号バッククウォート(=バッククォーテーション) で囲まれた文字列で、その中には、改行や『${変数}』というものを含むことができます。
テンプレートストリングを使わないで普通の文字列をつかって同じことをするには次のようにします。
すでに、変数b に値を代入するところで使っていますが、普通の文字列はシングルクウォートを使って囲います。
|
1 2 3 4 5 |
var a = 100; var b = 'abc'; console.log('\n テンプレートストリングの動作確認です\n' + ' Aの値は ' + a + ' / Bの値は ' + b + 'です\n'); |
このようなソースコードになります。テンプレートストリングで書いたものよりかは、やや読みにくくなってしまいます。
テンプレートストリングを上手につかって、console.log で出力内容をうまく工夫していくと、プログラミングがより上手になっていきます。
まとめ
まとめると、文字列の中に変数の値を入れたい場合は、バッククウォートで囲った文字列の中に、『${変数名}』を埋め込むと、そこが変数の中の値として文字列に埋め込まれる。ということになります。
補足
console.log とテンプレートストリングを組み合わせると、とても便利だったりします。
こちらの記事のように、以前にテンプレートストリングが存在しない時代の JavaScript では、console.log の機能として、似たような変数埋め込みの仕組みがありました。
今はテンプレートストリングがあるために、リンク先で紹介されている console.log の %s や %d を使った変数の値を埋め込む手法は、もう不要になっています。
古い JavaScript の知識は自分が書くときには不要ですが、誰か他の人が作った古いコードが書かれてあるときには、そのコードを読むときには必要となります。覚えておく必要はないですが、読めないコードがある場合には調べて読むようにしましょう。
そして、自分で書くときには積極的に新しい JavaScript の機能を使っていくとよいでしょう。