JavaScript 波括弧の中に波括弧{{}} エラー

Question

実現したいこと

const colorBg =()=>{
text.textContent = カラーコード: ${color.value};};

上記のコードを打ち込んで実行したい。

発生している問題・分からないこと

添付した画像のように、${color.value}の{}が紫色になっており、コードが実行されないです。
以前にもこのようなことがあり、解決したかった。

エラーメッセージ

Uncaught SyntaxError: Unexpected token 'const'

該当のソースコード

const colorBg =()=>{
text.textContent = `カラーコード: ${color.value}`;};

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

同様の質問がどこを探しても見つからなかったです。

補足

特になし

Comments

[Lhankor_Mhy]

前後のコードに原因がありそうです。ご提示のコードの範囲を増やしてください。

[keisuke.0128]

const color= document.querySelector('#colorPicker');
const text=document.querySelector('#colorText');

const colorBg=()=>{
text.textContent=`カラーコード：${color.value}`;
};

color.addEventListener('input',colorBg);

これです

[utm.]

このコード自体に不具合はあるのですか？不具合がないのであれば不具合を治すことはできないと思います

[quickquip]

足りてなさそうな情報

ファイル形式がJavaScriptなのか、ファイル形式はhtmlでその中のscript要素なのか、はたまた別の形式なのか
単一のファイルを開いているのか、フォルダを開いている中の1ファイルなのか
VSCodeから実行でブラウザを起動しているのか、VSCodeとは関係なくブラウザからローカルのhtmlを開いているのか、はたまたWebサーバが実行されていてVSCodeはそこを編集しているだけなのか
エラーメッセージ(?)はVSCodeのどこかにでているのか、表示しているブラウザのコンソールにでているのか

あとUnexpected token 'const' というエラーなのですから、"constより前に書いてあること"に原因があるのが普通でしょう

[quickquip]

あと
Uncaught SyntaxError: Unexpected token 'const'
がでている行がどこか

[quickquip]

カラーテーマはこの One Monokai Theme でしょうか?
https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai

[Lhankor_Mhy]

ご提示のコードではエラーが起きませんでした。
ご提示いただいていない部分に原因があるか、あるいはエラー自体が何かの勘違いかと思います。

Unexpected token 'const' というエラーが起きるには、
var const
や
+const
のような文法エラーが必要であろうと思います。テンプレートリテラルはひとまず関係がないと思います。

Answer 1

Uncaught SyntaxError: Unexpected token 'const'

というエラーを発生させたいなら

let a = 1 * (2+3  //括弧の閉じ忘れを意図的にする
const b = 5

というコードにすればよいです

Unexpected token 'const' というのは、constというトークンが来てはいけないところ(私が書いた例で言うと式の続きが来るはずのところ)で、期待してないconstというトークンが現れた、というエラーです (unexpectedの意味を辞書で引きましたか?)
この時

const b = 5

の部分だけ見てもエラーの原因は分かりません。ここだけを見せられて質問されてもどうにもなりません

回答/コメントで何人かの人から、ここに問題はないから他の部分を見せて欲しい、そうでなければ解決しない、と言われているのは正しいと思います

---

${color.value}の{}が紫色になっており、コードが実行されない

は全くの見当違いです

One Monokai Theme というテーマで

Embedded String Begin/End (埋め込み文字列の開始/終了)がその色なので、正常な動作をしているだけと推測します

Answer 2

まず${color.value}の括弧が紫色になるのは、言語の持つ仕様によるものです。
参照: テンプレートリテラル (テンプレート文字列) - JavaScript | MDN

提示のコードでは、当該エラーは発生しませんでした。
当該エラーの全文(エラーの発生した行数など)や、実際のコードの掲載をお願いします。
他の行でconstを使用しており、その近辺で構文エラーになっているのでは？と思います。

Answer 3

ご提示の内容ではとくに問題なさそうです

const text={};
const color={value:"test"}
const colorBg =()=>{
  text.textContent = `カラーコード: ${color.value}`;
};
console.log(text);
colorBg();
console.log(text);

Comments

[keisuke.0128]

ご回答ありがとうございます。このコードがあっているのは理解できたのですが、自分の方のvisualstadio codeは、エラーになるので、アプリの問題かなと思います。どの世に解決すればよいか分かりますか？