Extension of the ES6 string

1. The Unicode notation of the character

ES6 Unicode allowing a character to be represented in the form of s uxxxx, where xxxx represents the Unicode code point of the character.

"\u0061"
// "a"

However, this notation is limited to characters with code points between the number points of the code between .u0000 and .uFFFF. Characters that are outside this range must be represented in two double bytes.

"\uD842\uDFB7"
// "????"
"\u20BB7"
// " 7"

The above code indicates that JavaScript will understand the value of more than 0xFFFF (e.g., s u20BB7) directly after the value of Because s u20BB is a non-printable character, only one space is displayed, followed by a 7.

ES6 has made improvements to this point by correctly interpreting the 大括号 in braces.

"\u{20BB7}"
// "????"
"\u{41}\u{42}\u{43}"
// "ABC"
let hello = 123;
hell\u{6F} // 123
'\u{1F680}' === '\uD83D\uDE80'
// true

In the above code, the last example shows that 大括号 notation is UTF-16 encoding.

With this notation, JavaScript 6 to represent a character.

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

2. The string's traverser interface

ES6 字符串 遍历器接口 to the string (see chapter Iterator for details) so that the string can be for... Of loop traversal.

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

In addition to traversing strings, the biggest advantage of this traverser is that it recognizes points larger than 0xFFFF, which traditional for loops do not recognize.

let text = String.fromCodePoint(0x20BB7);
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "
for (let i of text) {
  console.log(i);
}
// "????"

In the above code, the string text has only one character, but the for loop will think that it contains two characters (neither printable) and for... The of loop correctly recognizes this character.

3. Enter U-2028 and U-2029 directly

JavaScript strings allow you to enter characters directly, as well as the escape form of input characters. For example, the Unicode code point in "in" is U-4e2d, which you can enter directly into the string, or you can enter its escape form, s u4e2d, which is equivalent.

'中' === '\u4e2d' // true

However, JavaScript states that there are five characters that cannot be used directly in strings and can only be used in escape form.

U-005C: Reverse solidus
U-000D: Carriage return
U-2028: Line separator
U-2029: Segment separator (paragraph separator)
U-000A: line feed

For example, a string cannot contain a backslash directly, and be sure to escape it by writing it as either . . . or .

The problem with this rule itself is that the JSON format allows the string to use the U-2028 (line separator) and U-2029 (segment separator) directly inside the string. As a result, the JSON output of the server is parsed by JSON.parse, and it is possible to report errors directly.

const json = '"\u2028"';
JSON.parse(json); // 可能报错

The JSON format has been frozen (RFC 7159) and cannot be modified. To eliminate this error, ES2019 allows the JavaScript string to enter the U-2028 (line separator) and U-2029 (segment separator) directly.

const PS = eval("'\u2029'");

According to this proposal, the above code will not be misntaged.

Note that the template string now allows both characters to be entered directly. In addition, regular expressions still do not allow direct input of these two characters, which is no problem, because JSON does not allow direct inclusion of regular expressions.

4. Renovation of JSON.stringify().

According to the standard, JSON data must UTF-8 However, it is now possible for the JSON.stringify() method to return strings that do not meet the UTF-8 standard.

Specifically, the UTF-8 standard states that code points between 0xD800 and 0xDFFF cannot be used alone and must be paired. F or example, s uD834/uDF06 is two code points, but must be paired together to represent the character ???? 。 T his is a workable way to 0xFFFF that the code point is greater than the value of the code. It is illegal to use the two code points, s uD834 and s uDFO6, alone, or in reverse order, because s uDF06 and uD834 do not have the corresponding characters.

The problem with JSON.stringify() is that it may return 0xD800 point between 0xDFFF and a single code point.

JSON.stringify('\u{D834}') // "\u{D834}"

To ensure that legitimate UTF-8 characters are returned, ES2019 changed the behavior of JSON.stringify(). If you encounter a single code point between 0xD800 and 0xDFFF, or a pairing that does not exist, it returns an escape string, leaving it to the app to decide what to do next.

JSON.stringify('\u{D834}') // ""\\uD834""
JSON.stringify('\uDF06\uD834') // ""\\udf06\\ud834""

5. Template string

In the traditional JavaScript language, the output template is usually written like this (jQuery's method is used below).

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

The above writing is quite cumbersome and inconvenient, ES6 introduces template strings to solve this problem.

$('#result').append(   
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
   );

模板字符串 string is an enhanced version of a string that is identified by an inverse quote ' . It can be used as a normal string, can be used to define a multi-line string, or to embed variables in a string.

// 普通字符串
   In JavaScript '\n' is a line-feed.   
// 多行字符串
   In JavaScript this is
 not legal.   
console.log(   string text line 1
string text line 2   );
// 字符串中嵌入变量
let name = "Bob", time = "today";
   Hello ${name}, how are you ${time}?

The template strings in the above code are represented in back quotes. If you need to use back quotes in the template string, you'll have to escape with a backslash before.

let greeting =    \   Yo\    World!   ;

If you use a template string to represent a multi-line string, all spaces and indentations are preserved in the output.

$('#list').html(   
<ul>
  <li>first</li>
  <li>second</li>
</ul>
   );

In the code above, spaces and line changes for all template strings are preserved, such as a line change in front of the label. If you don't want this line change, you can trim the trim method.

$('#list').html(   
<ul>
  <li>first</li>
  <li>second</li>
</ul>
   .trim());

The variable is embedded in the template string and needs to be written in ${

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
         User ${user.name} is not authorized to do ${action}.   );
  }
}

Inside the braces, you can put any JavaScript expression, you can perform operations, and you can refer to object properties.

let x = 1;
let y = 2;
   ${x} + ${y} = ${x + y}   
// "1 + 2 = 3"
   ${x} + ${y * 2} = ${x + y * 2}   
// "1 + 4 = 5"
let obj = {x: 1, y: 2};
   ${obj.x + obj.y}   
// "3"

The function can also be called 调用函数

function fn() {
  return "Hello World";
}
   foo ${fn()} bar   
// foo Hello World bar

If the value in braces is not a string, it is converted to a string as a general rule. For example, braces are an object that calls the object's toString method by default.

If the variable in the template string is not declared, an error is reported.

// 变量place没有声明
let msg =    Hello, ${place}   ;
// 报错

Because JavaScript code is executed inside the braces of the template string, if the braces are inside a string, it will be output as is.

   Hello ${'World'}   
// "Hello World"

Template strings can even 嵌套

const tmpl = addrs =>    
  <table>
  ${addrs.map(addr =>    
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
     ).join('')}
  </table>
   ;

In the code above, another template string is embedded in the variable of the template string, using the following method.

const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
// <table>
//
//   <tr><td><Jane></td></tr>
//   <tr><td>Bond</td></tr>
//
//   <tr><td>Lars</td></tr>
//   <tr><td><Croft></td></tr>
//
// </table>

If you need to reference the template string itself, execute it when you need it, and you can write it as a function.

let func = (name) =>    Hello ${name}!   ;
func('Jack') // "Hello Jack!"

In the above code, the template string is written as the return value of a function. Executing this function is equivalent to executing this template string.

6. Example: Template compilation

Let's look at an instance that generates a formal template from a template string.

let template =    
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
   ;

The above code places a regular template in the template string. The template uses the JavaScript code to be placed and the JavaScript expression to be output using the javaScript expression.

How do I compile this template string?

One idea is to convert it to a JavaScript expression string.

echo('<ul>');
for(let i=0; i < data.supplies.length; i++) {
  echo('<li>');
  echo(data.supplies[i]);
  echo('</li>');
};
echo('</ul>');

This conversion uses a regular expression.

let evalExpr = /<%=(.+?)%>/g;
let expr = /<%([\s\S]+?)%>/g;
template = template
  .replace(evalExpr, '   ); \n  echo( $1 ); \n  echo(   ')
  .replace(expr, '   ); \n $1 \n  echo(   ');
template = 'echo(   ' + template + '   );';

Then, encapsulate the template in a function and return it.

let script =
   (function parse(data){
  let output = "";
  function echo(html){
    output += html;
  }
  ${ template }
  return output;
})   ;
return script;

Put the above into a template compilation function compile.

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;
}

The use of the compile function is as follows.

let parse = eval(compile(template));
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//   <ul>
//     <li>broom</li>
//     <li>mop</li>
//     <li>cleaner</li>
//   </ul>

7. Label template

Template strings are functional, not just above. I t can be followed by a function name that is called to handle the template string. This is known as the tagged template feature.

alert   hello   
// 等同于
alert(['hello'])

标签模板 are not really templates, but a special form of function calls. "Tag" refers to a function, and the template string that follows it is its argument.

However, if there are variables in the template character, it is not a simple call, but the template string is processed into multiple parameters before the function is called.

let a = 5;
let b = 10;
tag   Hello ${ a + b } world ${ a * b }   ;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

In the code above, the template string is preceded by an identification tag, which is a function. The return value of the entire expression, which is the return value after the tag function processes the template string.

The function tag receives more than one argument in turn.

function tag(stringArr, value1, value2){
  // ...
}
// 等同于
function tag(stringArr, ...values){
  // ...
}

The first argument to the tag function is an array of members of the template string that do not have variable replacements, that is, variable substitutions occur only between the first and second members of the array, between the second member and the third member, and so on.

The other parameters of the tag function are the values of the template string after each variable has been replaced. Because in this case, the template string contains two variables, tag accepts two parameters, value1 and value2.

The actual values of all parameters of the tag function are as follows.

First argument: 'Hello', 'world', ''
Second parameter: 15
Third parameter: 50

That is, the tag function is actually called as follows.

tag(['Hello ', ' world ', ''], 15, 50)

We can write the code for the tag function as needed. Here's how the tag function is written, and the results of the run.

let a = 5;
let b = 10;
function tag(s, v1, v2) {
  console.log(s[0]);
  console.log(s[1]);
  console.log(s[2]);
  console.log(v1);
  console.log(v2);
  return "OK";
}
tag   Hello ${ a + b } world ${ a * b}   ;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"

Here is a more complex example.

let total = 30;
let msg = passthru   The total is ${total} (${total*1.05} with tax)   ;
function passthru(literals) {
  let result = '';
  let i = 0;
  while (i < literals.length) {
    result += literals[i++];
    if (i < arguments.length) {
      result += arguments[i];
    }
  }
  return result;
}
msg // "The total is 30 (31.5 with tax)"

The example above shows how to flatten the parameters back in their original positions.

The passthru function is written as follows with the rest argument.

function passthru(literals, ...values) {
  let output = "";
  let index;
  for (index = 0; index < values.length; index++) {
    output += literals[index] + values[index];
  }
  output += literals[index]
  return output;
}

An important application of tag templates is to filter HTML strings to prevent users from entering malicious content.

let message =
  SaferHTML   <p>${sender} has sent you a message.</p>   ;
function SaferHTML(templateData) {
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);
    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">");
    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}

In the above code, the sender variable is often provided by the user, and after being processed by the SaferHTML function, the special characters inside are escaped.

let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML   <p>${sender} has sent you a message.</p>   ;
message
// <p><script>alert("abc")</script> has sent you a message.</p>

Another application of label templates is multilingual transformation (internationalization).

i18n   Welcome to ${siteName}, you are visitor number ${visitorNumber}!   
// "欢迎访问xxx，您是第xxxx位访问者！"

Template strings by themselves are not a substitute for template libraries such as Mustache because there is no conditional judgment or circular processing, but with tag functions, you can add them yourself.

// 下面的hashTemplate函数
// 是一个自定义的模板处理函数
let libraryHtml = hashTemplate   
  <ul>
    #for book in ${myBooks}
      <li><i>#{book.title}</i> by #{book.author}</li>
    #end
  </ul>
   ;

In addition, you can even use tag templates to embed other languages in the JavaScript language.

jsx   
  <div>
    <input
      ref='input'
      onChange='${this.handleChange}'
      defaultValue='${this.state.value}' />
      ${this.state.value}
   </div>

The above code converts a DOM string into a React object through the jsx function. You can find the specific implementation of the jsx function in GitHub.

Here's a hypoththetic example of running Java code in JavaScript code through the java function.

java   
class HelloWorldApp {
  public static void main(String[] args) {
    System.out.println("Hello World!"); // Display the string.
  }
}
   
HelloWorldApp.main();

The first argument of the template handler (an array of template strings) also has a raw property.

console.log   123   
// ["123", raw: Array[1]]

In the above code, console .log accepted parameters, which are actually an array. The array has a raw property that holds the escaped original string.

Take a look at the example below.

tag   First line\nSecond line   
function tag(strings) {
  console.log(strings.raw[0]);
  // strings.raw[0] 为 "First line\\nSecond line"
  // 打印输出 "First line\nSecond line"
}

In the above code, the first argument of the tag function, strings, has a raw property and also points to an array. T he members of the array are exactly the same as the strings array. F or example, if the strings array is the "First line", then the strings.raw array is the "First line" and the "nSecond line". T he only difference between the two is that the slashes inside the string are escaped. F or example, the strings .raw array treats the array as two characters, s and n, rather than line breaks. This is designed to facilitate the original template prior to escape.

8. The limit of the template string

The label template mentioned earlier can be embedded in other languages. However, the template string escapes the string by default, preventing it from being embedded in other languages.

For example, the LaTEX language can be embedded in a label template.

function latex(strings) {
  // ...
}
let document = latex   
\newcommand{\fun}{\textbf{Fun!}}  // 正常工作
\newcommand{\unicode}{\textbf{Unicode!}} // 报错
\newcommand{\xerxes}{\textbf{King!}} // 报错
Breve over the h goes \u{h}ere // 报错

In the code above, the template string embedded in the variable document is completely legal for the LaTEX language, but the JavaScript engine will report errors. The reason is the escape of the string.

The template string escapes the characters s u00FF and s u{42} as Unicode characters, so the sunicode parses the error, and the sx56 escapes as a hex string, so sxerxes will report the error. That is, there's a special meaning in LaTEX, but JavaScript has escaped them.

To solve this problem, ES2018 relaxed restrictions on string escape in label templates. If you encounter an illegal string escape, you return the undefined instead of reporting an error, and you can get the original string from above the raw property.

function tag(strs) {
  strs[0] === undefined
  strs.raw[0] === "\\unicode and \\u{55}";
}
tag`\unicode and \u{55}`

In the above code, the template string should have been reported as an error, but because the restrictions on string escape were relaxed, the JavaScript engine set the first character to undefined, but the raw property can still get the original string, so the tag function can still handle the original string.

Note that this relaxation of string escape only takes effect when the label template parses the string, not when the label template is in place, and will still report errors.

let bad = `bad escape sequence: \unicode`; // 报错

Table of contents