ES6 — Template string usage

ES5 Output template character string

We used javascript to output template strings in ES5 earlier, usually as follows.

Example:

<div id="string">
</div>
<script type="text/javascript">
    let name = 'Wang Xiaoduan Coder';
    let age = 28;
    document.getElementById('string').innerHTML = 'My name is <b>' + name + '</b> and my age is <font color="green">' + age + '</font>';
</script>
Copy the code

Doing so requires a lot of concatenation of “” (double quotes) and + to get the template we need. But this is very inconvenient.

ES6 Output template character string

Template strings are now provided using ES6, written as follows

Example:

<div id="string">
</div>
<script type="text/javascript">
let name = 'Wang Xiaoduan Coder';
let age = 28;
document.getElementById('string').innerHTML = `My name is <b>${name}</b> and my age is <font color="green">${age}</font>`;
</script>
Copy the code

Template strings are identified by ‘(back quotes) and variables are enclosed by ${}. That’s a lot easier to write.

The use of backquotes in template strings

Since backquotes identify template strings, if we need to use backquotes in strings, we need to escape them.

Example:

<div id="string">
</div>
<script type="text/javascript">
let name = 'Wang Xiaoduan Coder';
let age = 28;
document.getElementById('string').innerHTML = `My name\`s <b>${name}</b> and my age is <font color="green">${age}</font>`;
</script>
Copy the code

Notice the difference in the example above. Change name is to name ‘s

Template strings reference variables/reference expressions/reference methods

• Reference variables

In this example, the name and age variables are referenced in the template by enclosing ${}.

• Reference expression

Example:

<div id="string"></div>
<script type="text/javascript">
    document.getElementById('string').innerHTML = `${1 + 2}`
</script>
Copy the code

You can place any expression in ${}

• Reference method

<div id="string"></div>
<script type="text/javascript">
    let name = 'Wang Xiaoduan Coder';
    let age = 28;
    function fun() {
      return 'andmy age is';
    }
    document.getElementById('string').innerHTML = `My name\`s <b>${name}</b> ${fun()} <font color="green">${age}</font>`
</script>
Copy the code

You can place any method in ${}

Multiple lines of template strings

<div id="string">
</div>
<script type="text/javascript">
let name = 'Wang Xiaoduan Coder';
let age = 28;
document.getElementById('string').innerHTML = `My name\`s 
<b>${name}</b>
and my age is 
<font color="green">${age}</font>`;
</script>
Copy the code

Template string nesting

<div id="string"></div>
<script type="text/javascript">
    let name = 'Wang Xiaoduan Coder';
    let age = 28;
    const tmp = `My name is ${name} and my age is ${`${age}`} `; document.getElementById('string').innerHTML = tmp;
</script>
Copy the code

Template compilation

Generates an instance of a formal template from the template string

Example:

<div id="string"></div>
<script type="text/javascript">
    let template = `<ul>
      <% for(let i = 0; i < data.supplies.length; i++) { %>
        <li><%= data.supplies[i] %></li>
      <% } %>
    </ul>`;
    let parse = eval(compile(template));
    document.getElementById('string').innerHTML = parse({ supplies: [ "broom"."mop"."cleaner"]});function compile(template){
      const evalExpr = /<%=(.+?) %>/g; const expr = /<%([\s\S]+?) %>/g; template = template .replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
        .replace(expr, '`); \n $1 \n echo(`');
      template = 'echo(`' + template + '`); ';
      let script =
      `(function parse(data){
        let output = "";
        function echo(html){
          output += html;
        }
        ${ template }
        return output;
      })`;
      return script;
    }
</script>
Copy the code

The label template

Template strings do more than that. It can be followed by the name of a function that will be called to process the template string. This is called the “tag template” feature. A tag template is not really a template, but a special form of function call. The “label” refers to the function, and the template string immediately following it is its argument.

Example:

<script type="text/javascript"> alert 'coder'; </script>Copy the code