当前位置： 移动技术网 > IT编程>网页制作>HTML > ES6笔记（ 二 ）- String

ES6笔记（ 二 ）- String

2020年07月26日  | 移动技术网IT编程  | 我要评论

目录:

  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\
        ";

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

  1. 字符串拼接问题
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
        `; // 使用模板字符串以后不用加\也能直接换行了
  1. 变量拼接问题

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

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字符串的所有新特性 - 阮一峰

本文地址：https://blog.csdn.net/weixin_44238796/article/details/107578377

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网