第2章 字符串，字符串模板

ES6字符串，字符串模板

  es6对字符串新添加了一些方法，最重要的引入了字符串模板(string template),下面来看看ES6字符串改动。

---

1.新增方法

  1. startsWith(str[, pos]): 是否已什么字符开始，pos表示搜索起始位置，不写默认为0
  2. endsWith(str[, pos]):   是否已什么字符结束，pos同上
  3. includes(str[, pos]):   是否包含某个字符
  4. repeat(times):          times表示重复多少次

eg:

let message = "hello world";
message.startsWith("he"); // true
message.startsWith("he", 4); // false

message.endsWith("rld"); // true
message.endsWith(" w", 7) // true

message.includes("or"); // true
message.includes("or", 8); // false

let s = "hello";
s.repeat(0); // ""(empty string)
s.repeat(2); // "hellohello"
// 一般可用于添加缩进
" ".repeat(4); // "    "

---

2.模板字符串

  模板字符串用backstick表示``(Esc下面那个键)，能够实现多行，实现替代,标签模板字符串

1.实现多行

eg:

// ES6之前实现方法
var message = "hello \n\
        world"; // "\n"表示换行转义， "\"表示字符串连续
// 或者
var message = "multiline\nstring";

// ES6模板字符串
var message = `hello
          world`;

2.实现替代

eg:

function total(count, price) {
    console.log(`${count} items cost $${(count * price).toFixed(2)}.`);
}
total(10, 0.25); // 10 items cost $2.50.

3.带标签的模板字符串(tagged template string)

表示字符串字面值(literals)和模板替代(substitutions)交替出现(interwoven),literals,substitutions均为数组，literals长度比substitutions大1

tag`${count} items cost $${(count * price).toFixed(2)}.`;
// tag为一个函数名，可以是任意名称，下面会讲到
   // literals = ["", " items cost $", "."] 第一个为空字符串
// substitutions = ["${count}", "${(count * price).toFixed(2)}"]

tag函数为：

// 交替出现
// substitutions.length === literals.length - 1
function tag(literals, ...substitutions) {
      let result = "";
      for (let i = 0; i < substitutions.length; i++) {
        result += literals[i];
        result += substitutions[i];
      }
     result += literrals[literals.length - 1];
     return result;
}

4.String.raw()标签模板字符串方法

原生的方法，将转义也表示出来，显示原始字符串

var message1 = "hello\n world";
console.log(message1); \\ "hello
                       \\ world"

var message2 = "hello\n world";
String.raw(message2); \\ "hello\n world"

---

3.其他方面的改变

1.正则表达式

1- 新添加"u","y" flags

2- 新添加 flags 属性,es5没有

3- 复制可以更改flag

// es5获取flags
function getFlags(re) {
    var text = re.toString();
    return text.substring(text.lastIndexOf("/") + 1, text.length);
}
var re = /\d/gi;
getFlags(re); // "gi"

// ES6
var re = /\d/gi;
re.source; // "\d"
re.flags; // "gi"

// ES5可以复制正则表达式，但是不能更改flags，ES6则可以
var re1 = /[a-z]/gi;
var re2 = new RegExp(re1, "m"); // 在ES5抛出错误，ES6正常

2.增加了对unicode的支持

主要差别在于超出BMP(BASE MULTILINGUAL PLAINS) 字符使用point方法将原来2个字符表示的字符，改为1个字符

// 添加方法
charPointAt(); // es5为charCodeAt()
String.fromPointCode(); // es5的为String.fromCharCode()

---

总结

1. 新添加一些方法startsWith(), endsWith(), includes(), repeat()
2. 添加模板字符串，及标签模板字符串(实质是函数)
3. 正则表达式方面的改动，对unicode的支持及其相应的方法

2016/9/11 12:12:50