String 扩展

Unicode 表示法

ES6 里面展示 Unicode

"\u{20BB7}";
// "𠮷"

有了这种表示法,JS 共有 6 种方法可以表示一个字符

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

遍历器接口

ES6 为字符串添加了遍历器接口,使得字符串可以被 for...of 循环

for (let item of "SUPER") {
  console.log(item);
}

模板字符串

ES6 中可以通过 ${}来展现变量

`string text``string text line 1 
 string text line 2
``string text ${expersion} string text`;

在这里你可以插入变量或者表达式仅仅需要用${}包起来就好

注意

这里的符号是反引号,也就是数字 1 左边的键,不是单引号或者双引号

这样就能轻松解决字符串包含变量或者表达式的问题了,对于多行如下

console.log(`string text line1
string text line2
`);

扩展方法

fromCodePoint

用于从 Unicode 码点返回对应的字符,并且可以识别大于 0xFFFF 的字符

//ES6

console.log(String.fromCodePoint(0x20bb7));

includes

ES5 中可以使用 indexOf()方法来判断一个字符串是否包含在另一个字符串中,indexOf 返回下角标的位置,如果不存在则返回-1

const str = "today";

console.log(str.indexOf("day"));

ES6 则提供了 includes 来判断一个字符串是否包含在另一个字符串中,返回 boolean 类型的值

const str = "today";

console.log(str.includes("day"));

//true

startsWith()

判断参数字符串是否在原字符串的头部,返回 boolean 类型的值

const str = "today";

console.log(str.startsWith("to"));

// true

endsWith()

判断参数字符串是否在原字符串的尾部,返回 boolean 类型的值

const str = "today";

console.log(str.endsWith("day"));

repeat()

repeat 方法返回一个新的字符串,表示将原字符串重复 n 次

const str = "today";

const newstr = str.repeat(10);

console.log(newstr);

String 扩展

在 ES8 中 String 新增了两个实例函数 String.prototype.padStart 和 String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾

padStart

将指定字符串填充到字符串头部,并返回新字符串

参数	含义	必选
targetLength	目标字符要保持的长度值	Y
padString	如果目标的长度不够需要的补白字符,默认为空	N

const str = "imooc";
console.log(str.padStart(8, "x")); //结果xxximooc
console.log(str.padEnd(8, "y")); //结果yyyimooc
console.log(str.padStart(8)); //   imooc

场景 1 日期格式化

const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = now.getDate().toString().padStart(2, "0");
console.log(year, month, day);
console.log(`${year}-${month}-${day}`);

场景 2 数字替换

// 数字替换，比如手机号，身份证号
const tel = "13012345678";
const newTel = tel.slice(-4).padStart(tel.length, "*");
console.log(newTel); // *******5678

String.padEnd()

方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

参数	含义	必选
targetLength	目标字符要保持的长度值	Y
padString	如果目标的长度不够需要的补白字符,默认为空	N

const str1 = "I am learning es in imooc";
console.log(str1.padEnd(30, "."));
// I am learning es in imooc.....

const str2 = "200";
console.log(str2.padEnd(5));
// "200  "

trim 去除前面的空格

trimStart

trimStart() 方法从字符串的开头删除空格，trimLeft()是此方法的别名。

注意

虽然 trimLeft 是 trimStart 的别名，但是你会发现 String.prototype.trimLeft.name === 'trimStart'，一定要记住

示例

let str = "   foo  ";
console.log(str.length); // 8
str = str.trimStart();
console.log(str.length); // 5

trimEnd()

trimEnd() 方法从一个字符串的右端移除空白字符，trimRight 是 trimEnd 的别名。

注意

虽然 trimRight 是 trimEnd 的别名，但是你会发现 String.prototype.trimRight.name === 'trimEnd'，一定要记住

示例

let str = "   foo  ";
console.log(str.length); // 8
str = str.trimEnd();
console.log(str.length); // 6

推荐阅读

• 模板字符串

• String.padStart

• String.padEnd