es6 新增字符串方法及Symbol类型 includes startsWith endsWith repeat padStart padEnd字符模板

ES6中新增了字符串的识别、重复、补全位、字符模板等内容。

includes、startsWith、endsWith

ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。

• includes()：返回布尔值，判断是否找到参数字符串。
• startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。

console.log("abcdef".includes("bc"));//true
console.log("abcde".startsWith("a"));//字符串是否是0开始
console.log("abcde".startsWith("b",1));//字符串在第1位是否从b开始
console.log("abcde".endsWith("e"));//以e为结尾
console.log("abcde".endsWith("d",4));//从第四位开始是否是最尾部

注意：

• 这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。
• 这三个方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf 和 lastIndexOf 这两个方法，它们会将正则表达式转换为字符串并搜索它。

repeat

• 返回新的字符串，表示将字符串重复指定次数返回。
• 如果参数是小数，向下取整
• 如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次
• 如果参数是 NaN，等同于 repeat 零次
• 如果参数是负数或者 Infinity ，会报错:
• 如果传入的参数是字符串，则会先将字符串转化为数字

console.log("abc".repeat(3));//abcabcabc
console.log("abc".repeat(2.6));//abcabc
console.log("abc".repeat(-0.7));//""
console.log("abc".repeat(NaN));//""
console.log("abc".repeat(-1));//RangeError: Invalid count value
console.log("abc".repeat("dd"));//""
console.log("abc".repeat("2"));//abcabc

padStart、padEnd

• padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。

• padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

• 以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

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

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

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // "    h"
console.log("hello".padStart(5,"A"));  // "hello"
console.log("hello".padEnd(10,",world!"));  // "hello,worl"

字符模板

反引号 `，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

• 可当作普通字符串
• 可当作多行字符串
• 字符串插入变量和表达式，变量名写在 $ {} 中，${} 中可以放入 JavaScript 表达式。
• 可以在字符串中调用函数
• 模板字符串中的换行和空格都是会被保留的

var age=20;
var str="小明今年"+age+"岁了";
var str=`小明今年${age}岁了`;
console.log(str);

//多行字符串
let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);//打印出的结果会自动换行

//插入变量
var data={price:20};
var str=`<div>${data.price}<div>`;

//调用函数
function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!

标签模板

标签模板，是一个函数的调用，其中调用的参数是模板字符串。

alert`Hello world!`;
// 等于
alert('Hello world!');

当模板字符串中带有变量，会将模板字符串参数处理成多个参数。

function f(stringArr,...values){
	let result = "";
	for(let i=0;i<stringArr.length;i++){
		result += stringArr[i];
		if(values[i]){
			result += values[i];
		}
	}
	return result;
}
let name = 'Mike';
let age = 27;

f`My Name is ${name},I am ${age+1} years old next year.`;
// 等于
f(['My Name is',',I am ',' years old next year.'],'Mike',28);
// "My Name is Mike,I am 28 years old next year."

Symbol

• ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
• Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。

var a=Symbol("a");
var b=Symbol(3);
var c=Symbol("a");
console.log(a==c);//false
console.log(b);//Symbol(3)

Symbol 作为对象的属性名，可以保证属性不重名

var a=Symbol();
var b=Symbol();
var obj={};
obj[a]=10;
obj[b]=20;
console.log(obj);//{Symbol(): 10,Symbol(): 20}

也可以这么来写：

var a=Symbol();
var b=Symbol();
var obj={
    [a]:10,
    [b]:20
}
console.log(obj);//{Symbol(): 10,Symbol(): 20}

注意：

• Symbol 作为对象属性名时不能用.运算符，要用方括号。
• 遍历只能遍历字符串，所以该属性不会出现在for…in 、 for…of 的循环中

//将上面的obj进行遍历
for(var prop in obj){
   console.log(prop);//无输出结果
}

使用 Symbol 定义常量，这样就可以保证这一组常量的值都不相等

const LEFT=Symbol();
const UP=Symbol();
const RIGHT=Symbol();
const DOWN=Symbol();
var state;
// state="left"  state=LEFT;
document.addEventListener("keyup",keyHandler);
setInterval(animation,16);

function keyHandler(e){
    switch(e.keyCode){
        case 37:
        state=LEFT;
        break;
        case 38:
        state=UP;
        break;
        case 39:
        state=RIGHT;
        break;
        case 40:
        state=DOWN;
        break;
    }
}

function animation(){
    if(!state) return
    switch(state){
        case LEFT:
        break;
        case RIGHT:
        break;
        case UP:
        break;
        case DOWN:
        break;
    }
}

symbol.for()

Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境*搜索。

var a=Symbol("ss");
var a1=Symbol.for("ss");
console.log(a===a1);//false

var a3=Symbol.for("ss");
console.log(a1===a3);//true

Symbol.keyFor()

Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

var a1=Symbol.for("ss");
console.log(Symbol.keyFor(a1));//ss