es6 字符串的扩展

你的名字 2022-02-04 03:01 315阅读 0赞

### 字符串的扩展 ###

*   *   *  传统的字符串拼接
         *  模板字符串
         *  标签模板
         *  ES6字符串String类扩展函数

### 传统的字符串拼接 ###

var str1 = "小白";
    	var str2 = "hello";
    	var str3 = "world";
    	console.log(str1 + "说:" + str2 +","+ str3); //小白说:hello,world

> 普通字符串的拼接不包含`空格`和`换行`

var str1 = "小白";
    	var str2 = "hello";
    	var str3 = "world";
    	var str4 = "<div>" + str1 + "说:" + "</div>" +
    	 		   "<div>" + str2 +","+ str3 + "</div>"
    	console.log(str4); // <div>小白说:</div><div>hello,world</div>

传统的字符串拼接大量数据相当繁琐不方便，所以es6的`模板字符串`诞生！(鼓掌、鼓掌、鼓掌)！！

### 模板字符串 ###

> 模板字符串（template string）是增强版的字符串，用反引号（\`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
> 
> `注意:如果在模板字符串中需要使用反引号，则前面要用反斜杠转义 ( \ )。`

**1.模板字符串可以定义多行字符串包含`空格`和`换行`**

let str = `小白说: hello,world`;
    	console.log(str); // 小白说:
    					  // hello,world

**2.`${ }`中可以放任意的 javaScript 表达式**

> `${ }`里可以是`运算表达式`

var a = 1;
    	var b = 2;
    	var c = `a与b的和是 ${ a+b}` //a与b的和是 3

> `${ }`里可以是`对象的属性`

var obj = { 
    		a:1,
    		b:2
    	}
    	var str = `obj的a属性是 ${ obj.a},b属性是 ${ obj.b}`; // obj的a属性是 1,b属性是 2

> `${ }`里可以是`函数的调用`

function fn(){ 
    		return 111
    	}
    	var str = `fn函数的返回值是 ${ fn()}`; // fn函数的返回值是 111

### 标签模板 ###

> 标签模板`(标签函数 + 模板字符串)`其实是函数调用的一种特殊形式。标签指的就是函数,模板指的就是模板字符串。

> 标签模板是ES6给我们带来的一种新语法，它常用来实现过滤用户的非法输入和多语言转换，这里不过多介绍，详细请访问 `阮一峰的es6入门`:[http://es6.ruanyifeng.com/\#docs/string\#标签模板][http_es6.ruanyifeng.com_docs_string]

### ES6字符串String类扩展函数 ###

> `repeat()函数:`将目标字符串重复N次，返回一个新字符串,目标字符串不受影响.

var name1 = '小白';
    	var name2 = name1.repeat(3);
    
    	console.log(name1); // 小白
    	console.log(name2); // 小白小白小白

> `includes()函数:`判断字符串中是否含有指定的子字符串，返回true表示含有和false表示未含有。第二个参数选填，表示开始搜索的位置。

var name = '小白';
    	name.includes('小'); // true,含有
    	name.includes('abc'); // false,未含有
    	name.includes('白',2); // false,从第3个字符串开始搜索，未含有

> `startsWith()函数:`判断指定的子字符串是否出现在目标字符串的开头位置，第二个参数选填，表示开始搜索的位置。

var name = '小白';
    	name.startsWith('小'); // true,在开头
    	name.startsWith('白'); // false,不在开头
    	name.startsWith('白',2); // false,从第3个字符串开始搜索，不在开头

> `endsWith()函数:`判断子字符串是否出现在目标字符串的尾部位置，第二个参数选填，表示针对前N个字符。

var name = '小白';
    	name.endsWith('小'); // false,不在尾部
    	name.endsWith('白'); // true,在尾部
    	name.endsWith('白',2); // true,从前2个字符串开始，在尾部

> `padStart()函数:`用于头部补全,共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

var str = 'hello';
    	var newStr = str.padStart(8,'1'); // 111hello

> `padEnd()函数:`用于尾部补全,共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

var str = 'hello';
    	var newStr = str.padEnd(8,'1'); // hello111

[http_es6.ruanyifeng.com_docs_string]: http://es6.ruanyifeng.com/#docs/string#%E6%A0%87%E7%AD%BE%E6%A8%A1%E6%9D%BF