ES6 字符串的扩展
Posted jiqing9006
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6 字符串的扩展相关的知识，希望对你有一定的参考价值。
字符的 Unicode 表示法
console.log("u0061");
// "a"ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。
let s = '??a';
console.log(s.codePointAt(0).toString(16)) // "20bb7"
console.log(s.codePointAt(2).toString(16)) // "61"
console.log("u0061");
console.log("u{20bb7}");20bb7
61
a
??
String.fromCharCode不能识别大于0xFFFF的码点，所以0x20BB7就发生了溢出，最高位2被舍弃了，最后返回码点U+0BB7对应的字符，而不是码点U+20BB7对应的字符。
ES6 提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。
console.log(String.fromCodePoint(0x20BB7));传统上，javascript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
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) // falserepeat()
repeat方法返回一个新字符串，表示将原字符串重复n次。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""padStart()，padEnd()
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba''x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '模板字符串
传统的 JavaScript 语言，输出模板通常是这样写的。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);下面是具体的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="result"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
let basket = {};
basket.count = 10;
basket.onSale = 20;
$('#result').html(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
</script>
</body>
</html>大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="result"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
let x = 1;
let y = 2;
$("#result").append(`${x} + ${y * 2} = ${x + y * 2}`);
// "1 + 4 = 5"
</script>
</body>
</html>以上是关于ES6 字符串的扩展的主要内容，如果未能解决你的问题，请参考以下文章