Learning to use js template strings.

 Why does js introduce template strings?

• This new feature was added in ES6, which means that js also supports templates, which are represented by backticks `.Called a string literal, it's a template string. It gives JS a simple string interpolation feature as well. Why is it simple, because it can't automatically escape special characters, it can't handle dates, times, etc. in special language formats, and it doesn't support looping.Currently it's just something that handles output strings, not a replacement for a template engine.

• Let's get to know it together.

• Insert variables in template strings.

Traditional string concatenation uses +, which is very cumbersome, but now, with ES6 syntax, string concatenation can be written like this:

  var a="123";

        var b="hello"+a+"hhh"+a;//before

        var c=`hello${a}hhh${a}`;//now

        console.log(c)

• Line breaks are allowed in template strings.

Template strings support newlines, which makes the code very nice and clear.

 let str=`<ul>

                <li>${xxx}</li>

                <li>${xxx}</li>

                <li>${xxx}</li>

            </ul>`;

• Template strings support nested use, as well as the use of expressions.

    let array= [

    {

      id: 1001,

      name: "aaa"

    },

    {

        id:1002,

        name:"bbb"

    }

  ]

 

  const str = `

    <ul>

      ${array.map((item)=>`

      <li>

        ${item.id} ,${item.name?333:0000}}

      </li>

      `)}

    </ul>

  `

  console.log(str);

• Functions can be called in template strings. The position in the string where the function is called will display the return value after the function is executed.

function fun(){

    return "666";

  }

  console.log(`hello${fun()}-111`);

Summary: A total of four usage scenarios have been introduced above, and more usage scenarios need to be explored by yourself!