整理学习——ES6字符串的扩展

转载整理自：http://caibaojian.com/es6/string.html

Unicode表示

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

codePointAt()

返回一个Unicode编码点值的非负整数。

var s = "?";
for (let ch of s) {
  console.log(ch ,ch.codePointAt(0), ch.codePointAt(0).toString(16));
  //Output: ? 134071 20bb7
}

//判断字符由两个字节还是四个字节组成的方法
function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

fromCodePoint()

用于从码点返回对应字符。
如果有多个参数则合并成一个字符串输出。

String.fromCodePoint(0x20BB7)
// "?"
String.fromCodePoint(0x141,0x34D2,0x5131)
//"Ł㓒儱"

字符串的iterator

可以被for…of…遍历，可以识别大于0xFFFF的码点。
传统的for循环无法识别大于0xFFFF的码点。

for(let codePoint of ‘food’){
	console.log(‘codePoint’);
}
/*Output:
f
o
o
d
*/

normalize()

将字符的不同表示方法统一为同样的形式（Unicode正规化）。不能识别中文，不能识别≥3个字符的合成。
参数:

1. NFC，Normalization Form Canonical Composition，标准等价合成，返回多个简单字符的合成字符。

标准等价：视觉和语义上的等价

2. NFD，Normalization Form Canonical Decomposition，标准等价分解，在标准等价的前提下，返回合成字符分解的多个简单字符。
3. NFKC，Normalization Form Compatibility Composition，兼容等价合成

兼容等价：语义上存在等价，但是视觉上不等价

4. NFKD，Normaliaztion Form Compatibility Decomposition，兼容等价分解，即在兼容等价的前提下，返回合成字符分解的多个简单字符。

查找字符串

第二个参数表示开始搜索的位置。

includes()

bool，表示是否含有参数字符串。

startsWith()

bool，表示参数字符串是否在源字符串的开头。

endsWith()

bool，表示参数字符串是否在源字符串的结尾。第二个参数表示结尾前n个字符。

repeat()

将源字符重复n次

var str = "test";
console.log(str.repeat(3));
//Output: testtesttest

参数规则：

1. 参数≥0，向下取整
2. -1＜参数≤0，为0
3. NaN，为0
4. 参数≤-1或为Infinity，报错
5. 参数为字符串，转为数字

补全长度

以下函数有两个参数，第一个参数是字符串最后的长度，第二个参数是用来补全的字符串，如果省略第二个参数，则是用空格来补全长度。常用的用途为数值补全指定位数、提示字符格式（YYYY-MM-12）

padStart()

头部补全，在源字符串之前补全至指定长度。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

padEnd()

尾部补全，在源字符串之后补全至指定长度。

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

补全规则

以var val = "teststr"为例说明

1. 源字符串长度≥指定的补全长度，则返回源字符串

	console.log(val.padStart(4,"11"));
	//Output: teststr

2. (源字符串长度 < 补全长度) && (源字符串长度+补全字符串长度 > 指定补全长度) 则会截除超出位数的补全字符串长度

console.log(val.padStart(10, "123456789"));
//Output: 123teststr
console.log(val.padEnd(10,"123456789"));
//Output: teststr123

模板字符串

使用反引号（`）标识，如果在模板字符串中使用反引号需要加\进行转译。

1. 多行字符串中，空格和缩进都会被保留
2. 嵌入变量${val}，val需要先行声明，可以为任意的JavaScript表达式，也可以进行运算，调用函数以及引用对象属性。如果不是字符串，将按一般规则转为字符串。
3. 如果val没有声明将会报错
4. 嵌套字符串

//定义tmpl函数
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;
const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));
/*Output
<table>
  
    <tr><td><Jane></td></tr>
    <tr><td>Bond</td></tr>
  
    <tr><td>Lars</td></tr>
    <tr><td><Croft></td></tr>
  
  </table>
*/

5. 引用自身

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

// 写法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"

模板编译

通过模板字符串，生成正式模板

//声明并初始化模板字符串
var template = `
	<ul>
		<%for(var i = 0;i < data.supplies.length; i++){%>
				<li>
					<%=data.supplies[i]%>
				</li>
		<%}%>
	</ul>
`
//编译模板字符串函数
function compile(temp){
	//定义正则识别JavaScript表达式，根据语句的差别进行调整。
	//仅识别同行
	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 + '`);';
	//将template 封装到一个函数中
	var script =`(
		function parse(data){
    		var output = "";
			function echo(html){
				output += html;
			}
			${ template }
			return output;
		}
	)`;
	return script;
}
var parse = eval(compile(template));
console.log(parse({ supplies: [ "broom", "mop", "cleaner" ] }));

标签模板

函数调用的一种特殊形式。

alert`123`

“标签”指的是函数，紧跟在后面的模板字符串就是它的参数。
但是，如果模板字符串内有变量，会将模板字符串内的字符串先提取出来组成数组作为第一参数，然后将变量各自单独地作为之后的参数。可以使用…val将这些变量整合为一个数组。
应用

1. 过滤HTML字符串，防止用户输入恶意内容
2. 多语言转换，即国际化

var a = 1,b = 2;
tag`Hello ${ a + b } world ${ a * b }`
//等同于
tag(['Hello ', ' world ', ''], 3, 2);

//拼接
function getResult(strArr, ...values){
	console.log(strArr,values);
	var output = "";
	for(var i  = 0;i <values.length;i++){
		output += strArr[i] + values[i];
	}
	output += strArr[i];
	return output;
}
console.log(getResult`a + b = ${a +b}，a * b = ${a * b}`);
/*Output:
["a + b = ", "，a * b = ", ""] [3, 2]
a + b = 3，a * b = 2
*/
console.log(getResult`a + b = ${a +b}`);
/*Output:
["a + b = ", "，a * b = ", ""] [3]
a + b = 3
*/

raw属性

保存转义后的原字符串。执行下面代码可看到区别。

function testRaw(str, ...vals){
	console.log(str[0], str.raw[0]);
}
testRaw`test\n`;
/*Output:
test
 test\n
*/

区别于str[0]打印时的直接输出转义结果，raw[0]显示的是转义后的原字符串，也就是输入的是什么样，打印的就是怎么样。

String.raw()

用来充当模板字符串的处理函数，返回一个转义后的原字符串。

1. 如果原字符串的\已经转义，那么String.raw不会做任何处理。
2. 可以作为处理模板字符串的基本方法，它会将所有的变量替换，并且对斜杠进行转义，方便下一步作为字符串来使用。
3. 也可以作为正常函数使用，第一个参数是一个具有raw属性的对象，且raw属性的值应该是一个数组或可以转化为数组的字符串。

//1)
console.log(String.raw`\n`);
//Output: \n
console.log(String.raw`\\n`);
//Output: \\n

//2)实现代码
String.raw = function (strings, ...values) {
	var output = "";
	for (var index = 0; index < values.length; index++) {
		output += strings.raw[index] + values[index];
	}

	output += strings.raw[index]
	return output;
}
//3)
console.log(String.raw({ raw: 'test' }, 0, 1, 2));
//Output: t0e1s2t