JavaScript高级学习：ES6新特性03——字符串

提示：
本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第三章

---

前言

本文讲解ES6字符串新特性。

---

提示：以下是本篇文章正文内容，下面案例可供参考

字符串模板的使用

字符串模板使用反引号(`)来表示变量

可以在字符串模板中直接换行，或者调研变量 ，或者操作表达式。

传统的字符串使用与字符串模板的使用对比

传统字符串方式换行

let str="hello \nworld";
console.log(str);

字符串模板方式换行

    let str2=`hello
world`;
    console.log(str2);

传统方式拼接字符串

let name="张三";
let age=18;
let info="大家好，我是"+name+",今年"+age+"岁";
console.log(info);

字符串模板拼接字符串

字符串模板拼接字符串,大括号内如果引用为声明的变量，则会报错

let info2=`大家好，我是${name},今年${age}岁`;
console.log(info2);

字符串模板使用任意JS表达式

在字符串模板的大括号内使用任意的JS表达式

let a=1;
let b=2;
number=`${a+b}`;
console.log(number);
let number2=`${a}+${b}=${a+b}`;
console.log(number2);	//3

字符串模板调用对象的属性

大括号内调用对象的属性

let obj={name:"zs",age:18};
let show=`我是${obj.name},今年${obj.age}`;
console.log(show);	//我是zs,今年18

字符串模板调用函数

function fn() {
    return "你好，我是吴彦祖";
}
let show2=`请问你是谁？${fn()}`;
console.log(show2);			//请问你是谁？你好，我是吴彦祖

字符串模板拼接字符串

let show3=`你好，我是${'李华'},我今年${60}岁了`;
console.log(show3);			//你好，我是李华,我今年60岁了

字符串新增方法

匹配字符串函数

匹配字符串函数

let str="hello world";
console.log(`${str}中是否包含llo          ${str.includes('llo')}`);
//hello world中是否包含llo          true
console.log(`${str}中是否以h开头          ${str.startsWith('h')}`);
//hello world中是否以h开头          true
console.log(`${str}中是否以world结尾      ${str.endsWith('world')}`);
//hello world中是否以world结尾      true

判断文件是否是压缩文件

let fileName="JF程序员.rar";
console.log(`${fileName}文件是否是压缩文件？   ${checkType(fileName)}`);
//JF程序员.rar文件是否是压缩文件？   true

function checkType(fileName) {
    return fileName.endsWith(".zip")||fileName.endsWith(".rar")||fileName.endsWith(".7z");
}

自动重复字符串

let x="x";
console.log(x);								//x
console.log(`${x}重复五次输出（算上自己一共五次）：${x.repeat(5)}`);
//x重复五次输出（算上自己一共五次）：xxxxx
console.log("hello".repeat(3));
//hellohellohello
console.log("hello".repeat(0)); //即不输出
console.log("h".repeat(2.9));//当参数为小数时，向下取整，结果为hh

//console.log("h".repeat(-5));//当参数为小于等于-1的负数，直接报错
console.log("h".repeat(-0.5));//当参数为大于-1的负数（0 —— -1），结果不报错
console.log("h".repeat(NaN));//当参数为NaN，相当于0，结果为""
console.log("h".repeat("2"));//当参数不是数字，会先转成数字，得到数字为2，结果为hh
console.log("h".repeat("abc"));//当参数不是数字，会先转成数字，转换失败则为NaN，结果为""

字符串补全

let y="y";
console.log(y.padEnd(5));       //使字符串长度变成5，如果长度不够，则在后面补全空格
console.log(y.padStart(5));       //使字符串长度变成5，如果长度不够，则在前面补全空格
console.log("kakarot".padEnd(5));       //当字符串本身长度超过设置长度时，该方法无效，返回原宇符中
console.log(y.padEnd(5,"a"));       //使用a在字符串后面补齐到5的长度
console.log(y.padStart(5,"a"));       //使用a在字符串前面补齐到5的长度
console.log(y.padEnd(6,"ab"));       //使用ab在字符串后面补齐到6的长度，超出的部分隐藏
console.log(y.padStart(6,"ab"));       //使用ab在字符串前面补齐到6的长度

字符串清除空格

console.log(s.trim());  //清除开头和结尾的空格
console.log(s.trimStart());  //清除开头的空格
console.log(s.trimLeft());  //清除左边的空格
// trimLeft该方法不属于ES5也不属于ES6,它是浏览器自带方法，目前还没有被官方承认，但是绝大多数浏览器都可以使用该方法。
console.log(s.trimEnd());  //清除结尾的空格
console.log(s.trimRight());  //清除右边的空格  ---和trimLeft一样属于浏览器语法