Skip to main content

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!
Labels:

Comments

Post a Comment

Popular posts from this blog

favicon.ico 404 Not Found Causes and Solutions

 What is favicon? It is the abbreviation of Favorites Icon. Its function is that in addition to displaying the corresponding title in the browser's favorites, icons can also be used to distinguish different websites. When I encounter this kind of error, I feel very uncomfortable. There is obviously no problem. Why is a 404 error reported? The following is the solution.
Post a Comment
Read more

Use of custom events in Vue components.

 The parent component uses props to pass data (such as a method) to the child component, and the child component needs to use custom events to pass data back to the parent component! We can use v-on to bind custom events, and then pass them to subcomponents, which will call after receiving the method. Each Vue instance implements the Events interface, that is: use $on(eventName) to listen for events and $emit(eventName) to trigger events.
Post a Comment
Read more

mapState, mapGetters, mapMutations, mapActions in vuex

 The above four objects are all in the vuex plug-in store, which is often used to store some data shared globally. But I still feel a little uncomfortable when using it, that is, I wrote a lot of repeated prefixes. At this time, these four objects appeared, which solved this pain point very well. mapState is mainly used to manipulate and obtain data, mapGetters is equivalent to computed properties, and mapMutations and mapActions are simplifications of mutation and action. They can be written as both objects and arrays.
Post a Comment
Read more