SoFunction
Updated on 2025-04-07

A brief discussion on the specific usage method of ES6 template strings

Write in front

Regarding ES6, the dust finally settled on July 18, 2015. Although major browsers do not have full support, this does not prevent us from wanting to get a fight. In the backend, you can use (0.12+) or frontend, or use Babel or Traceur for syntax pre-escaping to ES5.

Regarding this series (I don’t know if it can become a series, I’m always lazy), I will choose some content to learn in a irregular manner. Everyone is welcome to actively correct mistakes and leave a message to discuss.

Template strings

usage

// Normal string`In JavaScript '\n' is a line-feed.`

// Multi-line string`In JavaScript this is
not legal.`

// Embed variables in stringvar name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`  // Hello Bob, how are you today?

A new type of string literal syntax introduced in ES6 - template strings. Explained in writing, a template string is a string literal that can be embedded in the string text. Simply put, it is a string that adds variable function.

Let’s first look at our previous use of strings:

/**
  * Before ES6 string stitching
  */
var name = 'Doctor Dinglilac';
var desc = 'Dr. Dingxiang is a popular science website for the public';
var html = function(name, desc){
  var tpl = 'Company Name:' + name + '\n'+
      'Introduction:'+ desc;
  return tpl;
}

And now:

var html = `Company name：${name}
  Introduction：${desc}`;

Very simple.

Earn a paragraph of MDN for the definition of template string:

Template strings use backquotes () instead of double and single quotes in normal strings. A template string can contain placeholders for a specific syntax (${expression}). The expressions in the placeholder and the surrounding text are passed together to a default function that is responsible for joining all parts.

The placeholder ${} can be any js expression (function or operation), or even another template string, and the result of its calculation will be output as a string. If you need to use $,{ and other strings in the template, you need to escape.

Just look at an example and you will understand.

var x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}` // "1 + 2 = 3"

Unlike ordinary strings, template strings can also be written in multiple lines. All spaces, new lines, and indents in the template string will be output as original in the generated string.

And simple template strings still have many limitations. like:

  1. Special strings cannot be automatically escaped. (This can easily cause injection attacks)
  2. Can't cooperate well with the international library (that is, it won't format numbers, dates, texts, etc. in a specific language)
  3. There is no built-in loop syntax, (even conditional statements are not supported, you can only use the template structure method)

Tag template

To this end, the concept of label templates is introduced. The tag template introduces a tag (tag) in front of the backtick marks. This tag is a function that returns a value after a custom template string. Take the above special string as an example.

/**
  * HTML tag escape
  * @param {Array.<DOMString>} templateData tokens of string type
  * @param {...} ..vals The operation result of the expression placeholder tokens
  *
  */
function SaferHTML(templateData) {
 var s = templateData[0];
 for (var i = 1; i &lt; ; i++) {
  var arg = String(arguments[i]);
  // Escape special characters in the substitution.
  s += (/&amp;/g, "&amp;amp;")
      .replace(/&lt;/g, "&amp;lt;")
      .replace(/&gt;/g, "&amp;gt;");
  // Don't escape special characters in the template.
  s += templateData[i];
 }
 return s;
}
// Callvar html = SaferHTML`&lt;p&gt;This is an introduction to string template&lt;/p&gt;`;

The tag function will receive multiple parameters.

  1. The first parameter is an array containing string literals (i.e. values ​​without variable replacement)
  2. The following parameters are the variable values ​​that have been replaced

Change Example 1

var name = 'Doctor Dinglilac';
var desc = 'Dr. Dingxiang is a popular science website for the public';
tag`Company name：${name}Introduction：${desc}`

The parameters of tags are ['Company Name:','Introduction:'], 'Lilac Doctor', 'Lilac Doctor is a popular science website for the public'.

With such methods, the right to control is greatly increased. As mentioned above, international library or even loop statements.

Browser compatibility

  1. Server side, support
  2. Browser side, FF34+, chrome 41+
  3. Mobile IOS 8, Android 4.4
  4. IE Tech Preview

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.