一、字符串的扩展
目前常用的字符串方法有:
1)charAt(index):返回当前位的字符
2)charCodeAt():返回当前位的Unicode编码
3)slice(start=0,end=this.length):截取从start到end位(不包含end位[start,end) )的字符串
4)substr(from,length):从from位开始截取长度为length的字符串
5)substring(start,end=length):从start开始截取,截取到end(不含end位)
6)toUpperCase()、toLowerCase() 大小写转换
7)split(val):把字符串按照val拆分成数组
8)indexOf(str,start=0):从start位开始,匹配str是否在字符串中。如果存在则返回匹配到的当前子串的首位位置,不存在则返回-1。
有时候检验子串是否在字符串中,我们期望所得到的结果并不是索引而是true或false,但是目前的indexOf方法需要我们再继续做判断。故而,ES6又对字符串的方法进行了扩展,首先是字符串中子串的识别:
1. includes(str,start=0):从start位开始查找str,如果找到就返回true,否则返回false
//includes(str,start=0) 从start位开始查找str,找到就返回true,否则返回false
let str = 'Today is a wonderful day';
console.log(str.includes('a'));//true
console.log(str.includes('a', 6));//true
console.log(str.includes('to', 5));//false
2. startsWith(str,pos=0):判断从第pos位置开始的字符串是否以str开头
//startsWidth(str,pos=0) 如果在字符串的位置pos检测到str,返回true,否则放回false
console.log(str.startsWith('T'));//true
console.log(str.startsWith('is', 6));//true
console.log(str.startsWith('Tt'));//false
3. endsWith(str,pos=this.length):判断在pos位之前(不包含pos位)的字符串是否以str结尾
//endsWidth(str,pos=length) 在pos位之前的字符串是否以str结尾
console.log(str.endsWith('day'));//true
console.log(str.endsWith('day', 5));//true
4. repeate(number):返回重复了number次的新字符串
console.log('*'.repeat(5));//*****
5. 模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。模板字符串中嵌入变量,需要将变量名写在${}之中。
//模板字面量
let name = 'Caroline';
let msg = `Hello,${name}`;
console.log(msg);//Hello,Caroline
//保留空格和换行
let newStr = `<p>
<span>${msg}</span>
</p>`;
//如果在模板字符串中需要使用反引号,则前面要用反斜杠转义
console.log(`\`Yo\` World!`);//`Yo` World!
${}被称为插值语法,大括号内可以放原始值、引用值({}会使里面的值调用自身的toString方法)。也可以放表达式,函数执行。
//放表达式
function count(a,b){
return `${a}x${b}=${a*b}`;
}
console.log(count(1,2));//1x2=2
//放函数执行
function fn() {
return "Hello World";
}
console.log(`foo ${fn()} bar`);//foo Hello World bar
模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为标签模板功能。标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
alert`123`
// 等同于
alert(123)
如果函数后是包含插值语法的字符串,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
1)按照模板${}进行拆分,把拆分后的字符放到一个数组里,作为第一个参数
2)有几个模板${},就把这几个模板中的值作为剩下的参数传入
//标签模板
function print(arr, ...arg) {
console.log(arr);//["12", "45", ""]
console.log(arg);//["a", "b"]
}
let a = 'a', b = 'b';
print`12${a}45${b}`;
利用标签模板我们可以过滤 HTML 字符串,防止注入(xss攻击)
function saferHtml(arr, ...arg) {
let resultStr = '';
for (let i = 0, len = arg.length; i < len; i++) {
resultStr += arr[i];
resultStr += arg[i].replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
}
resultStr += arr[arr.length - 1];
return resultStr;
}
let name = '<script>while(true){alert("haha")}<script>';
document.write(saferHtml`<p>Hello,${name}</p>`);
二、数组的扩展
目前创建数组的方法有:
var arr = [1, 3, 2];
var arr1 = new Array(4);//长度为4的数组
var arr2 = new Array('4');//['4']
var arr3 = new Array(1, 3, 2);//[1,3,2]
当使用new Array的方式创建数组时,如果只传入一个数字型参数,那么这个参数就会被认为是数组的长度。但是这种方式容易造成混乱。ES6增加了Array.of方法,传入的参数都将作为数组中的值。
1. Array.of:传入的参数都将作为数组中的值
console.log(Array.of(3));//[3]
console.log(Array.of(1, 3, '4'));//[1, 3, "4"]
2. Array.from:将类数组转成数组
以前我们想要把类数组转成数组,需要使用Array.prototype.slice.call等方法。ES6提供了更加简洁的方式来进行转换。
function change() {
let arr = Array.from(arguments);
return arr;
}
console.log(change(1, 4, 5, 6));//[1, 4, 5, 6]
3. find(fn)和findIndex(fn):根据条件查找
let arr = [4, 1, 5, 3, 6, 4];
console.log(arr.find(x => x > 7));//undefined
console.log(arr.find(x => x > 4));//5
console.log(arr.findIndex(x => x > 4));//2
console.log(arr.findIndex(x => x > 7));//-1
1)find(fn):根据条件查找,如果找到满足条件的值就立即返回该值,如果没找到就返回undefined
2)findIndex(fn):根据条件查找,如果找到满足条件的值,就返回该值的索引;如果没有找到返回-1
4.fill(value,start=0,end=length): 从start到end(不包含end位)使用给定值填充一个数组
let arr = [4, 1, 5, 3, 6, 4];
console.log(arr.fill('*'));//["*", "*", "*", "*", "*", "*"]
console.log(arr.fill('%',4));//["*", "*", "*", "*", "%", "%"]
console.log(arr.fill('&',2,4));//["*", "*", "&", "&", "%", "%"]
//start和end可以为负数,表示倒数第几位,但是只有end要比start大才会填充
console.log(arr.fill('+',-2));// ["*", "*", "&", "&", "+", "+"]
console.log(arr.fill('!',-3,-2));//["*", "*", "&", "!", "+", "+"]