ES6基本知识速成——字符串的扩展

最新推荐文章于 2023-03-03 22:30:46 发布

奇点435

最新推荐文章于 2023-03-03 22:30:46 发布

阅读量148

点赞数 2

分类专栏： ES6 文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_59624094/article/details/129325056

版权

ES6 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

模板字面量

我们要定义一个字符串，会用单引号'' 或者双引号"" 去包裹字符串。在 ES6 中提供了反撇号去代替单引号和双引号。

如果我们的字符串中本身就包含反撇号，使用斜杠来转义一下 \`

多行字符串的处理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let str = `Hello,
        ECMAScript 6`;
      console.log(str);
    </script>
  </body>
</html>

在控制台可以看到如下显示：

这是因为模板字面量有个特点，定义在反撇号中的字符串，其中的空格、缩紧、换行都会被保留。

我们写在 index.html 文件中的代码是包含空格的。

字符串占位符

在 JavaScript 中，占位符由 ${} 符号组成，在花括号的中间可以包含任意 JavaScript 表达式。我们来举个例子吧～

新建一个 index2.html 文件，在文件中写入以下内容。

let str = `LanQiao Courses`;
let message = `I like ${str}.`;
console.log(message);

在控制台可以看到如下效果：

标签模板

这里的标签，我们可以理解为函数，该函数的参数说明如下：

第一个参数是一个数组，数组中存放普通的字符串，例如 str 中的 Welcome、to、course、.。
在第一个参数之后的参数，都是每一个占位符的解释值，例如 str 中的 ${name}。

function tag(literals, value1) {
  // 返回一个字符串
}

判断指定字符串是否存在

includes()：判断是否包含指定字符串，如果包含返回 true，反之 false。
startsWith()：判断当前字符串是否以指定的子字符串开头，如果是则返回 true，反之 false。
endsWith()：判断当前字符串是否以指定的子字符串结尾，如果是则返回 true，反之 false。

我们来举个例子～ 👻

新建一个 index5.html 文件，在文件中写入以下内容：

let str = "LanQiao Courses";
console.log("str 字符串中是否存在 Java：" + str.includes("Java"));
console.log("str 字符串的首部是否存在字符 Lan：" + str.startsWith("Lan"));
console.log("str 字符串的尾部是否存在字符 Course：" + str.endsWith("Course"));

在控制台你可以看到如下效果：

在上面代码中，使用 str.includes("Java") 来判断 str 字符串中是否包含指定字符串 Java，不包含，故结果为 false。
使用 str.startsWith("Lan") 来判断 str 字符串的首部是否包含指定字符串 Lan，不包含，故结果为 true。
使用 str.endsWith("Course") 来判断 str 字符串的尾部是否包含指定字符串 Course，str 尾部是 Courses，故结果为 false。

重复字符串

repeat(n) 方法用于返回一个重复 n 次原字符串的新字符串，其参数 n 为整数，如果设置 n 为小数，会自动转换为整数。

我们来举几个例子～

新建一个 index6.html 文件。

let str = "HELLO";
console.log(str.repeat(4));

在控制台会看到如下显示：

从上图可以看到输出了由 4 个 HELLO 组成的新字符串。

repeat() 方法中的参数 n 取值只能是整数，如果 n 为负数或者小数，可能会产生如下所示的问题。

let str = "我是一个字符串";
console.log(str.repeat(3.7)); // 我是一个字符串我是一个字符串我是一个字符串
console.log(str.repeat(-1)); // Uncaught RangeError: Invalid count value at String.repeat
console.log(str.repeat(0)); // ""

从上面可以看到，当 n 为小数时，会自动忽略小数部分；当 n 为负数时，会报错；当 n 为 0 时，为空。

替换字符串

在 ES5 中有一个 replace() 方法可以替换指定字符串，不过它只能替换匹配到的第一个字符串，如果想匹配整个字符串中所有的指定字符串是很麻烦的。

在 ES6 中，为我们提供了 replaceAll() 方法来解决这个问题，它可以用来替换所有匹配的字符串。

其语法格式为：

string.replaceAll("待替换的字符", "替换后的新字符");

我们来举个例子～

let str = "HELLOWHELLOWHELLO";
console.log(str.replaceAll("W", "_"));

在控制台可以看到如下效果：

可以看到原字符串中的所有 W 都用 _ 代替了。

奇点435

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6基本知识速成——字符串的扩展

ES6基本知识速成--字符串的扩展--模板字面量、字符串占位符、标签模板、判断指定字符串是否存在、重复字符串、替换字符串---includes()、startsWith()、endsWith() 来代替 indexOf() 方法判断字符串是否包含指定子串。repeat() 方法自定义次数重复输出指定字符串。replaceAll() 方法来代替了 replace() 替换指定字符串。
复制链接

扫一扫