字符串的扩展

2019-01-14 本文已影响0人 Jason_Shu

一. includes(), startsWith(), endsWith()

传统语法中，提供了「indexOf」方法来判断一个字符是否在「目标字符串」中。

includes(): 返回布尔值，判断「目标字符串」中是否有「参数字符串」
startsWith(): 返回布尔值，判断「参数字符串」是否在「目标字符串」的头部。
endsWith(): 返回布尔值，判断「参数字符串」是否在「目标字符串」的尾部。

比如：

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

这三种方法还可以有第二个参数，是表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

二. repeat()
repeat(string, n), 返回一个「新字符串」，表示将原字符串重复n次。

比如：

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

三. padStart(), padEnd()
字符串补全功能，如果某个字符串不够指定长度，会在头部或者尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

'123'.padStart(5, 'x'); // 'xx123'
'123'.padEnd(5, 'x'); // '123xx'

四. 模板字符串
这个「模板字符串」其实就是字符串的增强版。传统的javascript，可能存在下述的模板写法。

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

使用「模板字符串」后：

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

有一个「细节」要注意。如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

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

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

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

五. 标签模板
「模板字符串」还可以用在「函数」后面。该函数用来处理这个「模板字符串」。

alert`123`
// 等价于
alert('123')

let a = 5;
let b = 10;

tag`Hello!${a + b} world ${a * b}`;
//  等价于
tag(['Hello!', 'world', ''], 15, 50);

上述代码中，为啥tag的第一个参数中的数组多了个''元素？因为在「模板字符串」中，是以「 ${}」为分割符号的，最后的「$ {a * b}」和「`」之间虽然没有字符，但是还是会分割出「''」来。

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

function tag(stringArr, value1, value2){
  // ...
}

// 等同于

function tag(stringArr, ...values){
  // ...
}

上述的「stringArr」和「...values」组合起来可以用「arguments」一起拿到。

来个复杂的例子。

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)"

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

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, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}

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

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

String.raw`Hi\u000A!`;
// 返回 "Hi\\u000A!"

参考：http://es6.ruanyifeng.com/#docs/string

字符串的扩展

猜你喜欢

热点阅读