ECMAScript6笔记：字符串的扩展(2)

你的名字 2022-07-15 06:28 183阅读 0赞

(接上篇)

## padStart()，padEnd() ##

ES6推出了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart用于头部补全，padEnd用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
    'x'.padStart(4, 'ab') // 'abax'
    
    'x'.padEnd(5, 'ab') // 'xabab'
    'x'.padEnd(4, 'ab') // 'xaba'

上面代码中，padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
    'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
    // '0123456abc'

如果省略第二个参数，则会用空格补全长度。

'x'.padStart(4) // ' x'
    'x'.padEnd(4) // 'x '

padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
    '12'.padStart(10, '0') // "0000000012"
    '123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
    '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

## 模板字符串 ##

传统的JavaScript语言，输出模板通常是这样写的。

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

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

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

模板字符串（template string）是增强版的字符串，用反引号（\`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

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

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

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

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如ul标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

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

模板字符串中嵌入变量，需要将变量名写在$\{\}之中。

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}.`);
      }
    }

大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

模板字符串之中还能调用函数。

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

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

如果模板字符串中的变量没有声明，将报错。

由于模板字符串的大括号内部，就是执行JavaScript代码，因此如果大括号内部是一个字符串，将会原样输出。

模板字符串甚至还能嵌套。

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

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

// 写法一
    let str = 'return ' + '`Hello ${name}!`';
    let func = new Function('name', str);
    func('Jack') // "Hello Jack!"
    
    // 写法二
    let str = '(name) => `Hello ${name}!`';
    let func = eval.call(null, str);
    func('Jack') // "Hello Jack!"

## 标签模板 ##

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

alert`123`
    // 等同于
    alert(123)

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

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

上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。

函数tag依次会接收到多个参数。

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

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。

tag函数所有参数的实际值如下。

第一个参数：\[‘Hello ‘, ’ world ‘, ”\]  
第二个参数: 15  
第三个参数：50

也就是说，tag函数实际上以下面的形式调用。

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

我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法，以及运行结果。

“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容。

上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义。

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

标签模板的另一个应用，就是多语言转换（国际化处理）。

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

除此之外，你甚至可以使用标签模板，在JavaScript语言之中嵌入其他语言。

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

上面的代码通过jsx函数，将一个DOM字符串转为React对象。你可以在Github找到jsx函数的具体实现。

模板处理函数的第一个参数（模板字符串数组），还有一个raw属性。

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

上面代码中，console.log接受的参数，实际上是一个数组。该数组有一个raw属性，保存的是转义后的原字符串。

请看下面的例子。

tag`First line\nSecond line`
    
    function tag(strings) {
      console.log(strings.raw[0]);
      // "First line\\nSecond line"
    }

上面代码中，tag函数的第一个参数strings，有一个raw属性，也指向一个数组。该数组的成员与strings数组完全一致。比如，strings数组是\[“First line\\nSecond line”\]，那么strings.raw数组就是\[“First line\\nSecond line”\]。两者唯一的区别，就是字符串里面的斜杠都被转义了。比如，strings.raw数组会将\\n视为\\和n两个字符，而不是换行符。这是为了方便取得转义之前的原始模板而设计的。

## String.raw() ##

ES6还为原生的String对象，提供了一个raw方法。

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

String.raw`Hi\n${2+3}!`;
    // "Hi\\n5!"
    
    String.raw`Hi\u000A!`;
    // 'Hi\\u000A!'

如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。

String.raw`Hi\\n` // "Hi\\n"

String.raw方法可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用。

String.raw方法也可以作为正常的函数使用。这时，它的第一个参数，应该是一个具有raw属性的对象，且raw属性的值应该是一个数组。

String.raw({ raw: 'test' }, 0, 1, 2);
    // 't0e1s2t'
    
    // 等同于
    String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

## 模板字符串的限制 ##

前面提到标签模板里面，可以内嵌其他语言。但是，模板字符串默认会将字符串转义，因此导致了无法嵌入其他语言。

举例来说，在标签模板里面可以嵌入Latex语言。

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 // 报错
    `

上面代码中，变量document内嵌的模板字符串，对于Latex语言来说完全是合法的，但是JavaScript引擎会报错。原因就在于字符串的转义。

模板字符串会将\\u00FF和\\u\{42\}当作Unicode字符进行转义，所以\\unicode解析时报错；而\\x56会被当作十六进制字符串转义，所以\\xerxes会报错。

为了解决这个问题，现在有一个提案，放松对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义，就返回undefined，而不是报错，并且从raw属性上面可以得到原始字符串。

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

上面代码中，模板字符串原本是应该报错的，但是由于放松了对字符串转义的限制，所以不报错了，JavaScript引擎将第一个字符设置为undefined，但是raw属性依然可以得到原始字符串，因此tag函数还是可以对原字符串进行处理。

注意，这种对字符串转义的放松，只在标签模板解析字符串时生效，不是标签模板的场合，依然会报错。

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