テンプレートリテラルの使い方

Question

前提・実現したいこと

テンプレートリテラルで計算結果を出力したいのですが、なかなか上手く出力されません。

該当のソースコード

let counter = 1;
console.log("translate3d(${(- counter * 100) - 25}vw ,0 ,0)");
console.log("translate3d("+ (- counter * 100) - 25 + "vw ,0 ,0)");
console.log((- counter * 100) - 25);

発生している問題・エラーメッセージ

translate3d(${- counter * 100 - 25}vw ,0 ,0)
NaNvw ,0 ,0)
-125

上記のような出力結果になります。一番最後の出力結果は思い通りになっています。

上の2つがうまく出力されません。

調べてみましたが、解決することができませんでした。

ご教授頂ければ、幸いです。

Answer 1

テンプレートリテラルは「"」ではなく「`」で囲む必要があります。以下のようにしましょう。

console.log(`translate3d(${(- counter * 100) - 25}vw ,0 ,0)`);

また2番目はテンプレートリテラルとは関係ありませんが、"translate3d("+ (- counter * 100) - 25まで評価した時点で文字から数値を減算しようとして結果がNaNになっているため意図した結果になっていません。
以下のように数値部分は括弧でくくって明示的に先に評価されるようにしましょう。

console.log("translate3d("+ ((- counter * 100) - 25) + "vw ,0 ,0)");

Comments

[ntttt]

非常に分かりやすい解説をして頂き、ありがとうございました。

ku__ra__geさんのおかげで、解決することができました。