ES6笔记（ 二 ）- String

目录:

1. 字符串
   • 新的常用字符串操作方法
     • startsWith, endsWith
     • includes
     • repeat
     • 【 扩展 】ES5 + ES6字符串常用方法集合
   • 模板字符串
     • ES6之前字符串书写的问题
     • 使用模板字符串获得更好的体验
     • 【 扩展 】模板字符串的标记

字符串

新的常用字符串操作方法

startsWith, endsWith

startsWith用于判定一个字符串是不是以参数字符串开头, endsWith用于判定一个字符串是不是以参数字符串结尾, 是的话返回true, 否则返回false

const str = 'helloWorld';
console.log(str.startsWith('h')); // true
console.log(str.startsWith('l')); // false
console.log(str.endsWith('ld')); // true
console.log(str.endsWith('l')); // false

// 同indexOf一样, 他们的第二个参数都代表从什么位置开始查
console.log(str.startsWith('h', 1)); // false
console.log(str.startsWith('l', 2)); // true

// endsWith的第二个参数有一点点的不同, 他的第二个参数代表的是检索前多少个字符
console.log(str.endsWith('o', 5)); // 看前5个字符是不是以0结尾 true
console.log(str.endsWith('ld', 6)); // false

includes

includes用于判定一个字符串中是否包含某个字符串, 是返回true, 非返回false

const str = 'helloWorld';
console.log(str.includes('Wo')); // true
console.log(str.includes('helloWorld')); // true

// includes也接收第二个参数用于设定开始查的位置
console.log(str.includes('he', 4)); // false

repeat

将一个字符串重复参数n次

const str = 'helloWorld';
console.log(str.repeat(2)); // helloWorldhelloWorld
console.log(str.repeat(0)); // 直接返回''
console.log(str.repeat(1.2)); // helloWorld, 会直接被取整

ES6新增的字符串接口还有一些比如, padStart, padEnd之类的, 笔者觉得其实日常中不太用得到吧, 也挺鸡肋的, 就没有书写了, 如果感兴趣的小伙伴可以自己去查一下

【 扩展 】ES5 + ES6 常用字符串方法集合

Name	Features	Grammer
String.prototype.indexOf	用来查找一个字符串中是否包含另一个字符串, 是的话返回该字符串第一次出现的索引, 否则返回-1
String.prototype.toLowerCase	用来将字符串全部转化为小写
Srtring.prototype.toUpperCase	用来将字符串全部转化为大写
String.prototype.concat	用来拼接字符串
String.prototype.trim	去除字符串左右两边空格
String.prototype.split	将字符串以指定参数分割成数组
String.prototype.substring	将字符串以指定形式（参数为start和end索引, 左闭右开）截断并返回截断的字符串
String.prototype.substr	将字符串以指定形式（参数为start索引和number要截取多少个, 跟substring有区别）截断并返回截断的字符串
String.prototype.replace	进行字符串替换（将第一个参数的指定字符串替换成参数2的字符串, 第一个参数可以填正则表达式）, 将替换后的字符串返回不改动原有字符串
String.prototype.match	用于将字符串和正则进行匹配, 将符合正则表达式的值都挑选出来并返回
String.prototype.search	用于将字符串和正则进行匹配, 如果有字符串中有符合正则的值, 则将符合要求的第一个字符串的索引返回, 否则返回-1
String.prototype.startsWith	判断字符串是否以参数字符串开头, 是返回true, 否则返回false
String.prototype.endsWith	判断字符串是否以参数字符串结尾, 是返回true, 否则返回false
String.prototype.includes	判断字符串是否包含参数字符串, 是返回true, 否则返回false

---

模板字符串

ES6之前字符串书写的问题

1. 字符串换行问题

const str = "helloWorl\
        i am a coder\
        i like eat apple\
        ";

上面这种写法是非常的恶心了, 如果我们不加\, 则系统会直接给我们报错, 但是我们加上斜杠, 斜杠越来越多看起来不直观读起来也很烦

2. 字符串拼接问题

const str = '';
const username = 'thor';
const job = 'apple';

str = 'helloWorld' + username + ', i am a' + job + ', i like eat' + things;

如果你用原生JS拼接过dom元素的话, 你一定懂我的痛, 如果你没有使用过, 你也大概可以看出上面的代码是真的挺难写的

使用模板字符串获得更好的体验

ES6推出了模板字符串来优化我们遇到的以上两个问题

格式: `要书写的字符串` , `为要反引号一般在ESC键的下方

1. 换行问题

const str = `helloWorl
        i am a coder
        i like eat apple
        `; // 使用模板字符串以后不用加\也能直接换行了

2. 变量拼接问题

格式: 在模板字符串中使用${ 要传递的变量或者表达式 }

const str = '';
const username = 'thor';
const job = 'apple';

str = `helloWorld${username}, i am a ${job}, i like eat ${things}`; // 很自然的就实现了变量的拼接, 非常的nice

【 扩展 】模板字符串的标记

说实话, 模板字符串的标记其实没有什么特别大的作用, 比较鸡肋

他帮助我们更加完全的控制一块末班模板字符串

我们将函数名挂在模板字符串的前面就是在给模板字符串做标记, 其实就是在告诉系统, 在模板字符串最后生成之前送进我们挂的函数名中走一次, 最后函数的返回值会变成模板字符串最终的值

function perfectControll() {
   // 跟模板字符串相关的信息都会通过arguments传递过来, 你可以根据信息自由控制返回值
   console.log(arguments);
   return 'helloWorld';
}

const a = 10,
      b = 20;

// 
const normalText = `a + b 的值是${ a + b }`;
const tagText = perfectControll`a + b 的值是${ a + b }`;

console.log(normalText); // 输出 a + b的值是30
console.log(tagText); // 输出helloWorld

这就是模板字符串的标记

系统给我们提供了一个String.raw方法, 来将字符串中所有的\全部自动转义成普通斜杠, 来帮助我们处理一些极端场景

const str = `正则表达式的书写方式是\\`;
// 这种情况下, 其实我们是想让两个斜杠都展示出来的, 但是很显然是不行的, 因为有一个斜杠会被转义

// 而如果这种斜杠太多, 我们一个个的去反转义也挺麻烦的

// 所以这个时候我们要用到String.raw, 也是用String.raw作为标记挂载模板字符串前
const str2 = String.raw`正则表达式的书写方式是\\`; 
console.log(str2); // 输出正则表达式的书写方式是\\

---

整体来说, 字符串其实还提供了一些新特性, 比如对Unicode的更好的支持啊, 包括一些其他的特殊api啊, 但是笔者认为那些其实不太重要或者日常中用的比较少, 面试中几乎也不太问, 所以就没写了, 如果小伙伴自己有兴趣, 可以去查看相关文档, 这里笔者推荐一个阮一峰前辈的关于字符串新特性的链接

ES6字符串的所有新特性 - 阮一峰