#100DaysOfVanillaJS:关于字符串、字符串方法和模板字面量

2025-06-10

#100DaysOfVanillaJS:关于字符串、字符串方法和模板字面量

替代文本

字符串是任何应用程序的基本组成部分。它们是用单引号或双引号括起来的文本片段。它们可以包含任何字母、数字或特殊字符。理解字符串中每个字符如何具有可访问的位置值非常重要,并且了解如何使用各种内置方法(操作)来执行所需的操作也至关重要。我将通过示例向您展示如何操作。准备好开始了吗?打开您的 JavaScript 控制台,让我们开始学习吧!

索引

替代文本
永远记住,字符串中的每个字符(包括空格)都有其自己的位置值,从 0 开始。我的理解方法是用手指数字符串中的字符数,并记住从零开始数。这叫做零索引。了解这一点很重要,因为您可以轻松访问字符串中的特定字符。

每个字符串都包含一个长度属性,它告诉您字符串中有多少个字符。

字符串的长度总是比最后一个索引大一。

字符串是不可变的,这意味着您不能更改单个值。

字符串连接

替代文本
您可以使用加法运算符来“连接”或组合字符串。如果您想添加空格来分隔单词并使其更具可读性,请在字符串内添加空格,或在带引号的字符串之间添加空格。

如果您尝试对 2 个字符串使用减法运算符,您将得到返回值 NaN(即非数字)。

那么什么是字符串方法?

替代文本

方法是内置的操作,可以对任何字符串执行,其中有很多可供您使用。您可以替换字符串中的字符、切片、在字符串中搜索、修剪、将字符大写或小写以及拆分等等。

您可以使用点符号执行如下所示的操作。请注意,对字符串执行任何方法都不会更改原始字符串。要做到这一点,您必须创建一个新的变量,其值等于字符串名称

我强烈建议你尝试不同的字符串方法,以便熟练掌握操作字符串的技巧。说实话,面试的时候经常会被要求这么做。

字符串参数

有些方法允许你在括号内传递额外的信息来修改它们的行为。让我通过例子来说明。下面我将提供一个具体的例子。

要查找 indexOf()、切片或替换,Goku 询问

替代文本

我想指出 3 种非常重要的方法,我在前端面试和工作中处理更复杂的应用程序时经常使用这些方法:.index()、.slice() 或 .replace()。

.()index方法可用于搜索字符串是否包含指定字符。它将返回子字符串的起始位置。它始终返回一个数字。如果找不到,则返回 -1。

.slice(方法接受一个或两个参数,并允许您“切片”或剪切字符串的子字符串。它不会改变或更改实际的字符串,因为字符串是不可变的。您可以传入 2 个参数(切片以字符串开始和结束)

.replace()方法接受 2 个参数:第一个参数指定要在字符串中替换的内容,第二个参数描述要用什么来替换它。

模板字符串

替代文本

ES6 引入了模板字面量,允许插入字符串,这意味着你可以在字符串中执行方法。它在 Python 等许多其他语言中很常见,而 JavaScript 也正在迎头赶上。

本节中的代码片段提供了一些实际示例,帮助您理解其工作原理。请注意,每个模板字面量都以反引号开头和结尾,而不是像常规字符串那样使用引号,并且您希望在字符串中求值的表达式必须以美元符号开头并用括号括起来。

您还可以使用反引号创建多行代码,从而提高代码的可读性,无需使用/n关键字进行转义。为了更好地格式化代码,请在字符串外部执行 .trim() 方法以去除空格。

替代文本

我们接下来会学到什么?

希望你喜欢学习如何利用我们可以使用的各种方法来创建和操作字符串。接下来,我们将进一步了解 null 和 undefined 之间的区别。

  • 空值和未定义
  • 循环、对象、数组
鏂囩珷鏉ユ簮锛�https://dev.to/taeluralexis/100daysofvanillajs-all-about-strings-string-methods-template-literals-5h75
PREV
关于冒名顶替综合症的深夜忏悔(以及我如何应对它)让我们开始吧......好吗?
NEXT
#100DaysOfPython 第 2 天:功能、范围和最佳实践在#100DaysOfPython 系列的第 3 天我将学习什么?