javascriptの文字列内の変数展開

PHPだとテキスト内に変数を展開させたい場合、こんなふうにできます。

$name = "ほげほげ";
echo "こんにちは${name}さん";

出力結果
こんにちはほげほげさん

文字列中に${変数名} と書くと変数の中身を展開してくれるという便利機能です。
因みに括弧は無くてもいいそうですが、括弧を付けないとどこからどこまでが変数名かわからなくなってしまうので、基本的にはつけておいた方がいいでしょう。
C言語だとprintf()文など関数を使わないと展開できないので、PHPは便利だなぁと思ってました。

で、ここからが本題。

実はこれ、JavaScript(ECMAScript6)でも同じことができます。
こんな感じにします

var name = "ほげほげ";
var str = `こんにちは${name}さん`;

これをテンプレートリテラルというそうです。
基本的に使い方はPHPと同じです。ただし文字列をクオート記号ではなくバッククオート記号で囲う必要があります。
バッククォート記号は、日本語配列キーボードではSift+@で入力できます。
また、バッククオートを使う利点として、テキスト内で改行しても大丈夫になっています。ただ、コードのレイアウトの関係で余計な空白とかが入ってしまうと問題が出ることもあるので、できれば改行しない、もしくは制御文字で改行させるほうがいいようなきはします。

いやぁ、いままで全部プラス記号でつなげていました。
というか、大昔これで動かないのがあって、これは使わないほうがいいんだということで止まってました。
さすがにもう大丈夫だと思うのでこれからはこっちを使っていきたいですね。

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) | Mana |本 | 通販 | Amazon
AmazonでManaの【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)。アマゾンならポイント還元本が多数。Mana作品ほか、お急ぎ便対象商品は当日お届けも可能。また【Amazon.co.jp 限定】1冊ですべて身に...
タイトルとURLをコピーしました