私はES6を学ぶ上での第一歩を踏み出していますが、今はテンプレートに関するいくつかの問題に直面しています。ES6テンプレートで構文エラーが発生する

JavaScriptは次のようになります。私は、ページをロードする際

'<h1>${makeUpperCase('Hello')} ${name} Developer</h1><p>paragraph comes here</p>';

だから捕捉されないでSyntaxErrorを言って、私のコンソールにエラーを参照してください。

"use strict" 

let name = 'John'; 

function makeUpperCase(word){ 
    return word.toUpperCase(); 
} 

let template = '<h1>${makeUpperCase('Hello')} ${name} Developer</h1><p>paragraph comes here</p>'; 

document.getElementById('template').innerHTML = template;

それは私の変数が読み込まれていないように思えます。予期しない識別子

私のindex.htmlは次のように簡単です：

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Learning ES6</title> 
</head> 
<body>  
    <header> 
     <h1 id="heading">Learning ES6</h1> 
     <p>With Sidney de Sousa</p> 
    </header> 

    <div id="container"> 
     <div id="template"> 

     </div> 
    </div> 
    <script src="src/main.js"></script> 
</body> 
</html>

HELLO John Developerという見出しがあるはずです。

あなたは

出典

2017-08-11 Ragmah

テンプレートのような'バックチックを使用しても、そう、あなたのコードは次のようになります。 '\'

$ {makeUpperCase（ 'こんにちは'）} $ {name}のデベロッパー

段落はこちら

\ ';' – Joe

一重引用符'を使用しているため、文字列として解釈されます。（関数は値'HELLO'と共に使用される場合にも列が解剖されている - ここで最初'を開く単一引用符と一致している - 。したがってHELLOが定義されていないJavaScriptで変数として扱われる）

あなたがなければなりません`バッククォートを使う\` `テンプレートを定義するには、この

let template = `<h1>${makeUpperCase('Hello')} ${name} Developer</h1><p>paragraph comes here</p>`;

出典

2017-08-11 08:57:13

その詳細を完全に理解できませんでした。今すぐバックチックを使用していて、それは動作します。 – Ragmah

を助けることを願って、あなたがバッククォート（ `）の代わりに、定期的に引用符（ '）を使用していることを確認していますか？ここで

は一例です：

const str = `Hi, my name is ${userName}`;

はES6でテンプレートリテラルの詳細についてはthis linkをチェックしてください。

出典

2017-08-11 08:56:30

ES6テンプレートで構文エラーが発生する

$ {makeUpperCase（ 'こんにちは'）} $ {name}のデベロッパー

答えて

関連する問題