ES6 字符串

·  阅读 200

1. 字符串的遍历

ES6字符串增加了遍历器接口,for-of 语法,相比传统for(let i=0;.....)来循环字符串,for-of循环可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点

for (let cp of 'foo') {
  console.log(cp)
}
复制代码

2. normalize()

在欧洲很多国家的字符中有语调和符号或重音符号,Unicode提供了两种方法。一种是直接提供带重音符号的字符,比如Ǒ(\u01D1)。另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如O(\u004F)和ˇ(\u030C)合成Ǒ(\u004F\u030C)。 这两种语法在在视觉和语义上都等价,过去javascript不能识别这种等价。

'\u01D1'==='\u004F\u030C' //false

'\u01D1'.length // 1
'\u004F\u030C'.length // 2
复制代码

ES6提供的normalize()方法,可在字符串比较之前正规化,规避这种错误。

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true
复制代码

3. includes()

过去判断数组或字符串中包含某一元素的时候需要用到indexOf()方法, 现在数组或字符串都能使用includes()方法来判断是否包含某一元素。

const arr = ['apple', 'banana', 'orange']
const str = 'Sometimes I walk a little faster in the school hallway just to get next to you.'
arr.includes('orange') //true
str.includes('walk') //true
复制代码

4. startsWith(), endsWith()

判断字符串是否以指定子串开头/结尾

'You can say goodbye and you can say hello'.startsWith('You') 
//true
'Welcome to LA'.endsWith('LA')
//true
复制代码

5. repeat()

str.repeat(n)返回一个字符串,重复str n次的结果, 如果n是小数,则会被floor取整,n如果为其他类型则会转为数字再执行,如果为Infinity或负数或NaN, 报错

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // "
复制代码

6. padStart(),padEnd()

字符串没有达到要求的长度,可以在开始/结尾处填充到指定长度

let str = 'abc'
str.padStart(5, '>')
//>>abc

'x'.padEnd(5, 'ab') // 'xabab'
复制代码

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

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
复制代码

如果省略第二个参数,则默认补全空格

'x'.padStart(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"
复制代码

7. 模版字符串

模版字符串是一种增强型的字符串,以符号``为标识,它可以当成普通的字符串使用,也可以不带\n直接写多行字符串,也可以在字符串中以${}插入变量或表达式

// 普通字符串
`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}?`
复制代码

模版字符串以反引号``作为标识,如果模版字符串中出现反引号,则需要用反斜杠转义`

let greeting = `\`Yo\` Greet!`;
// `Yo` Greet!
复制代码

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

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

复制代码

8. 模版编译函数

模版字符串的灵活使用,需要写编译函数来完成 下面,下面是一个通过模板字符串,生成正式模板的实例。

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

上面的代码中, 放置了一个常规模板。该模板使用<%...%>放置JavaScript代码,使用<%= ... %>输出JavaScript表达式。

将上面的内容拼装成一个模板编译函数compile。

function compile(template){
  var evalExpr = /<%=(.+?)%>/g;
  var expr = /<%([\s\S]+?)%>/g;

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  var script =
  `(function parse(data){
    var output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;

  return script;
}
复制代码

compile函数的用法如下。

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

复制代码

9. 标签模版

标签模版并不是模版,而是给函数传参的一种形式,标签就是指函数,模版就是指紧跟在后面的模版字符串。

let foo = 5;
let bar = 10;

tag`Hello ${ foo + bar } world ${ foo * bar }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
复制代码

下面是一个应用的例子

var total = 30;
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;

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

  output += literals[index]
  return output;
}
msg //"The total is 30 (31.5 with tax)"
复制代码

标签模版有一个经典的应用,过滤用户的恶意输入(XSS攻击)

var message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData, ...values) {
  var s = '';
  for (var i = 0; i < values.length; i++) {
    var arg = String(values[i]);

    // Escape special characters in the substitution.
    s += templateData[i] + arg.replace(/&/g, "&amp;")
                                .replace(/</g, "&lt;")
                                .replace(/>/g, "&gt;");
  }
  s += templateData[i];
  return s;
}
复制代码

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

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

message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>
复制代码

标签模板的另一个应用,就是多语言转换(国际化处理)。

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

之所以叫标签模版,其实最多的使用真实是用来处理标签模版

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

模板字符串本身并不能取代Mustache之类的模板库,因为没有条件判断和循环处理功能,但是通过标签函数,你可以自己添加这些功能。

// 下面的hashTemplate函数
// 是一个自定义的模板处理函数
// 将伪代码转换为实际结果
var libraryHtml = hashTemplate`
  <ul>
    #for book in ${myBooks}
      <li><i>#{book.title}</i> by #{book.author}</li>
    #end
  </ul>
`;
复制代码

下面则是一个假想的例子,通过java函数,在JavaScript代码之中运行Java代码。

java`
class HelloWorldApp {
  public static void main(String[] args) {
    System.out.println(“Hello World!”); // Display the string.
  }
}
`
HelloWorldApp.main();
复制代码

模板处理函数的第一个参数(模板字符串数组),还有一个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两个字符,而不是换行符。这是为了方便取得转义之前的原始模板而设计的。

10. String.raw()

ES6 String.raw()可以理解为功能为转义的标签模版函数,它的功能是把字符串中的\转义,结果为\ \

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

String.raw`Hi\u000A!`;
// 'Hi\\u000A!'
复制代码

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

String.raw`Hi\\n`
// "Hi
复制代码

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

//'test'会先转为['t', 'e', 's', 't']

String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

// 等同于
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);
复制代码
分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改