乐趣区

关于es6:ES6字符串的扩展

本节咱们来学习 ES6 中字符串类型的扩大,包含一些字符串对象的新增办法的应用等。

字符的 Unicode 表示法

ES6 增强了对 Unicode 的反对,JavaScript 中能够采纳 \\uxxx 模式示意一个字符,其中 xxxx 示意字符的码点。例如:

console.log("\u0075"); // u

然而这种表示法只限于码点在 \\u0000~\\uFFFF 之间的字符。超出这个范畴的字符,必须用两个双字节的模式示意。

console.log("\uD842\uDFB7"); // ????

console.log("\u20BB8");  // 8

这示意,如果间接在 \\u 前面跟上超过 0xFFFF 的数值,例如 \\u20BB8,JavaScript 会了解成 \\u20BB+8。因为 \\u20BB 是一个不可打印字符,所以只会显示一个空格,前面跟着一个 8

ES6 对这一点做出了改良,只有将码点放入大括号,就能正确解读该字符。

console.log("\u{20BB7}"); // ????

console.log("\u{41}\u{42}\u{43}");  // ABC

let hello = 123;
console.log(hell\u{6F}); // 123

console.log('\u{1F680}' === '\uD83D\uDE80');  // true

下面代码中,最初一个例子表明,大括号表示法与四字节的 UTF-16 编码是等价的。

有了这种表示法之后,JavaScript 共有 6 种办法能够示意一个字符。

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

遍历器接口

ES6 为字符串增加了遍历器接口,使得字符串能够被 for...of 循环遍历。

示例:

例如咱们遍历字符串 xkd

for (let i of 'xkd') {console.log(i)
}

输入:

x
k
d

除了遍历字符串,这个遍历器最大的长处是能够辨认大于 0xFFFF 的码点,传统的 for 循环无奈辨认这样的码点。

示例:
let a = String.fromCodePoint(0x20BB7);

for (let i = 0; i < a.length; i++) {console.log(a[i]);
}


for (let i of a) {console.log(i);
}

上述代码中,字符串 a 只有一个字符,然而 for 循环会认为它蕴含两个字符(都不可打印),而 for...of 循环会正确辨认出这一个字符。

模板字符串的应用

咱们在 JavaScript 语言中,如果要输入内容,通常能够像上面这样写的:

var name = "侠课岛";
var age = 10;
console.log("我的名字是"+ name + ",我往年" + age + "岁了。");

// 输入:我的名字是侠课岛,我往年 10 岁了。

这种写法须要应用大量的双引号和加号来拼接能力失去咱们须要的模板,十分不不便。

而在 ES6 中提供了模板字符串,只须要将想要输入的内容用反引号标识,而后变量局部应用 ${} 括起来即可。

示例:

下面的例子能够用模板字符串写成上面这样:

var name = "侠课岛";
var age = 10;
console.log(` 我的名字是 ${name},我往年 ${age} 岁了。`);

// 输入:我的名字是侠课岛,我往年 10 岁了。

这样写很显著语法语法简洁了很多,不须要再应用大量的双引号和加号来拼接字符串和变量。

模板字符串都是应用反引号示意的,如果咱们心愿在模板字符串中应用反引号,则须要在后面应用反斜杠 \\ 本义。

示例:
let content = `\`hello\` xkd!`;
console.log(content);  // 输入:`hello` xkd!

如果应用模板字符串示意多行字符串,所有的空格和缩进都会被保留在输入之中。

console.log( ` 你好 \` 我叫做侠课岛,
 往年 3 岁啦!`);

执行代码后,会间接输入如下所示内容:

 你好 ` 我叫做侠课岛,
 往年 3 岁啦!

在模板字符串中嵌入变量

如果咱们想要在模板字符串中嵌入变量,那么变量须要写在 ${} 之中才可能失常应用,否则会当做一般字符串输入。

示例:
var name= "xkd";
console.log(` 你好,${name}`);

// 输入:你好,xkd

然而如果模板字符串中的变量没有被申明,将导致报错哟。

let content = `Hello, ${name}`;
console.log(content);     // 输入:ReferenceError: name is not defined

因为模板字符串的大括号外部,就是执行 JavaScript 代码,因而如果大括号外部是一个字符串,将会原样输入。

let content = `Hello, ${"xkd"}`;
console.log(content);    // 输入:Hello, xkd

大括号 ${} 外部能够放入任意的 JavaScript 表达式,能够进行运算,以及援用对象属性。

var a = 10;
var b = 20;
console.log(`a=${++a},b=${a+b}`);

// 输入:a=11,b=31

在模板字符串中调用函数

ES6 中模板字符串有一个更弱小的性能,就是咱们能够在模板字符串之中调用函数。

示例:
function show() {return "侠课岛";}

console.log(` 你好,你叫什么名字?
你好,我叫 ${show()}`);

执行代码后,输入内容如下所示:

 你好,你叫什么名字?
你好,我叫侠课岛 

如果大括号中的值不是字符串,将依照个别的规定转为字符串。比方,大括号中是一个对象,将默认调用对象的 toString 办法。

判断是否蕴含子字符串

JavaScript 想要判断字符串是否蕴含子字符串,能够应用 indexOf() 办法。然而在 ES6 中又新增了三种办法能够用来判处案是否蕴含子字符串,如下所示:

  • includes():返回布尔值,示意是否找到了参数字符串。
  • startsWith():返回布尔值,示意参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,示意参数字符串是否在原字符串的尾部。
示例:

这三个办法都能够承受两个参数,第一个参数为须要搜寻的字符串,第二个参数为可选的搜寻起始地位索引:

let string = "hello, xkd";

console.log(string.includes("hello"));  // true
console.log(string.startsWith("x", 7)); // true
console.log(string.endsWith("abc"));    // false

留神上述办法的返回值都为布尔值,所以如果须要晓得子字符串的地位,还是得用 indexOf()lastIndexOf() 办法。

字符串反复

ES6 中新增了一个 repeat() 办法,用于返回新的字符串,示意将字符串反复指定次数返回。

示例:
console.log("a".repeat(5));  // 输入:aaaaa

如果 repeat() 函数中的参数为小数,则会向下取整:

console.log("a".repeat(3.1));  // 输入:aaa
console.log("b".repeat(4.5));  // 输入:bbbb
console.log("c".repeat(5.9));  // 输入:ccccc

如果参数为 0-1 之间的小数,会进行取整运算,0-1 之间的小数取整失去 -0,等同于反复零次:

console.log("a".repeat(-0.1));  // 输入:""console.log("b".repeat(-0.9));  // 输入:""

如果传入的参数是字符串,则会先将字符串转化为数字:

console.log("a".repeat("five")); // 输入: ""console.log("b".repeat("3"));    // 输入: bbb

字符串补全

ES6 中为字符串补全提供了两个新的办法,如下所示:

  • padStart():返回新的字符串,示意用参数字符串从头部(左侧)补全原字符串。
  • padEnd():返回新的字符串,示意用参数字符串从尾部(右侧)补全原字符串。

这两个办法承受两个参数,第一个参数是指定生成的字符串的最小长度,第二个参数是用来补全的字符串。如果没有指定第二个参数,默认用空格填充。

示例:
console.log("xkd".padStart(5, "o")); // 输入:ooxkd 
console.log("a".padEnd(3, "xkd"));   // 输入:axk
console.log("b".padStart(3));        // 输入:b

如果指定的长度小于或者等于原字符串的长度,则返回原字符串:

console.log("hello".padStart(3,"a"));  // hello
console.log("hello".padStart(7,"a"));  // aahello

如果原字符串加上补全字符串长度大于指定长度,则截去超出位数的补全字符串:

console.log("hello".padEnd(7,",xkd!"));    // hello,x
console.log("abcde".padEnd(10,"fghijk"));  // abcdefghij

还能够用于补全位数:

console.log("1".padStart(10, "0"));  // 0000000001
console.log("2".padEnd(10, "0"));    // 2000000000
退出移动版