跟着 MDN 学JavaScript day_8：字符串的创建、操作与嵌入表达式

前言字符串是编程中处理文本的基础工具。在Web开发中无论是显示用户信息、生成动态内容还是处理表单输入字符串操作都无处不在。JavaScript提供了多种方式来处理字符串从基本的创建和连接到高级的模板字面量和表达式嵌入掌握这些知识对于编写动态交互的网页至关重要。字符串的创建方式三种引号的选择与区别在JavaScript中创建字符串可以使用三种不同的引号单引号、双引号和反引号。这三种方式在大多数情况下都能正常工作但它们之间存在一些重要的差异。单引号和双引号本质上没有区别你可以根据个人偏好选择任何一种。例如使用单引号声明的字符串可以写为const str ‘Hello World’使用双引号声明的字符串可以写为const str “Hello World”。这两种方式在功能上是完全等价的关键是要在整个项目中保持一致。如果你在一个项目中混合使用单引号和双引号虽然不会导致错误但会降低代码的可读性和一致性。反引号声明的字符串被称为模板字面量这是ES6引入的一种新特性。模板字面量与普通字符串不同它具备两个核心特性可以在字符串中嵌入JavaScript变量或表达式并且可以声明多行字符串而不需要使用特殊的换行符。引号匹配的重要性在使用引号声明字符串时必须确保字符串的开头和结尾使用相同的引号字符。如果开始使用单引号结尾也必须使用单引号如果开始使用双引号结尾也必须使用双引号。混用不同种类的引号会导致语法错误。例如以下代码会产生错误const badQuotes 不允许这样写。这里开始使用了单引号结尾却使用了双引号JavaScript解析器无法正确识别字符串的结束位置。另外如果忘记闭合引号也会引发错误。例如const badString 这是一个测试缺少了结尾的引号浏览器会报出unterminated string literal的错误。这类错误在编写代码时很容易出现需要仔细检查字符串的边界。参考代码示例constsingleQuote使用单引号创建的字符串;constdoubleQuote使用双引号创建的字符串;constbacktick使用反引号创建的字符串;console.log(singleQuote);console.log(doubleQuote);console.log(backtick);模板字面量与字符串嵌入在字符串中嵌入变量模板字面量的最大优势之一是能够直接在字符串中嵌入变量。嵌入的语法是使用将变量名包裹起来。当模板字面量被解析时将变量名包裹起来。当模板字面量被解析时{}内部的变量会被其实际值替换然后整个字符串被拼接在一起。这种机制极大地简化了字符串的构建过程。在传统的字符串拼接中需要使用加号将多个字符串片段和变量连接起来代码既繁琐又容易出错。而使用模板字面量你可以将变量直接放在字符串中的合适位置使代码更加直观和易于维护。例如假设有一个名为name的变量存储了用户的名字你想创建一个包含这个名字的欢迎消息。使用模板字面量可以这样写const greeting 欢迎你${name}。name变量的值会被自动插入到字符串中指定的位置。在字符串中嵌入表达式除了嵌入变量模板字面量还允许嵌入任何有效的JavaScript表达式。表达式可以包含数学运算、函数调用、三元运算符等。表达式的结果会被计算出来然后转换为字符串并嵌入到最终的结果中。这个特性非常强大因为它允许你在创建字符串的同时执行复杂的逻辑。例如你可以根据分数计算百分比并将结果直接嵌入到字符串中而不需要先计算出一个临时变量。模板字面量中的表达式可以是简单的数学运算如ab也可以是更复杂的逻辑如ab也可以是更复杂的逻辑如{score 60 ? 及格 : 不及格}。任何能够返回值的表达式都可以放在${}中。参考代码示例constname李明;constgreeting你好${name}欢迎来到我们的网站;console.log(greeting);constscore85;consttotalScore100;constmessage你的得分是${score}分得分率为${(score/totalScore)*100}%;console.log(message);constisLoggedIntrue;conststatusMessage当前用户状态${isLoggedIn?已登录:未登录};console.log(statusMessage);多行字符串的处理模板字面量的多行支持在传统的JavaScript字符串中创建一个跨越多行的字符串需要使用换行转义字符\n。\n告诉JavaScript解析器在这里插入一个换行符但这种方式使代码的可读性变差尤其是在处理较长的多行文本时。模板字面量彻底解决了这个问题。在模板字面量中源代码中的换行符会被保留成为字符串的一部分。这意味着你可以直接按照你想要的格式编写多行字符串就像在文本编辑器中写普通文本一样。当你编写一个包含换行的模板字面量时每一行的内容都会成为最终字符串的一部分行与行之间的换行符会被自动包含进去。这使得编写诗歌、地址、HTML片段等多行文本变得异常简单。普通字符串的多行实现如果你必须使用普通字符串单引号或双引号来实现多行效果唯一的方法就是使用\n转义序列。你需要在每一行的末尾添加\n表示这一行结束后需要换行。然后将多个字符串片段通过加号连接起来或者将它们放在同一个字符串中。这种方式不仅编写起来麻烦阅读起来也很困难。因为在代码中你无法直观地看到字符串最终呈现的格式需要依靠想象来理解\n的位置和作用。参考代码示例// 使用模板字面量创建多行字符串constpoem春眠不觉晓 处处闻啼鸟。 夜来风雨声 花落知多少。;console.log(poem);// 使用普通字符串创建多行字符串constpoemTraditional春眠不觉晓\n处处闻啼鸟。\n夜来风雨声\n花落知多少。;console.log(poemTraditional);// 嵌入HTML片段的多行字符串consthtmlSnippetdiv classcontainer h1标题/h1 p这是一个段落/p /div;console.log(htmlSnippet);字符串中的引号转义引号冲突的产生原因字符串中的引号冲突是一个常见问题。当你使用某种引号来声明字符串时如果字符串内部也出现了相同的引号字符JavaScript解析器就会产生误解。解析器会认为字符串的结束位置就是内部引号出现的位置从而导致字符串被意外截断剩余的部分被视为无效代码。例如使用双引号声明的字符串内部又出现了一个双引号const sentence “她说你好”。在这个例子中解析器看到第一个双引号时认为字符串开始看到第二个双引号时认为字符串结束因此实际的字符串内容只是她说后面的你好就成了无法解析的代码。两种解决方案解决引号冲突问题有两种常见的方法。第一种方法是换用其他种类的引号来声明字符串。如果你需要在字符串内部使用双引号那么可以使用单引号或反引号来声明整个字符串。这种方法简单直接不需要对字符串内容做任何修改。第二种方法是使用反斜杠转义。反斜杠是一个转义字符它告诉解析器紧随其后的字符应该被视为普通字符而不是代码的一部分。在需要转义的引号前面加上反斜杠该引号就会被当作字符串内容处理而不会干扰字符串的边界识别。转义字符的语法是\后跟需要转义的字符。例如表示一个作为普通字符的单引号表示一个作为普通字符的双引号。反斜杠本身也可以被转义\表示一个普通的反斜杠字符。参考代码示例// 解决方案一换用不同的引号constquote1她说JavaScript很有趣;constquote2他说Python也很不错;console.log(quote1);console.log(quote2);// 解决方案二使用反斜杠转义constquote3她说\JavaScript很有趣\;constquote4他说\Python也很不错\;console.log(quote3);console.log(quote4);// 转义反斜杠本身constpathC:\\Users\\Documents\\file.txt;console.log(path);字符串与数字的类型转换加号运算符的类型处理在JavaScript中加号运算符具有双重作用。当加号两侧都是数字时它执行算术加法运算。当其中一侧是字符串时它执行字符串连接操作。这种行为被称为类型强制转换即JavaScript会自动将非字符串类型转换为字符串以便执行连接操作。当你试图将一个字符串和一个数字相加时数字会被自动转换为字符串然后两个字符串被连接在一起。例如console.log(“得分” 100)的结果是字符串得分100而不是110。这种自动转换在某些情况下是方便的但在其他情况下可能会导致意外的结果。Number函数的显式转换当你明确需要一个数字类型时可以使用Number函数将字符串转换为数字。Number是一个全局函数它接收一个参数并尝试将其转换为数字。如果转换成功返回数字值如果转换失败返回NaN。当用户通过表单输入数据时输入的内容总是以字符串的形式传递。即使用户输入的是数字它也是字符串类型的数字例如123而不是123。如果你想对这个数值进行数学运算必须先将其转换为数字类型否则加号运算符会执行字符串连接而不是加法。Number函数会忽略字符串开头和结尾的空白字符但要求整个字符串能够被完整地解析为一个有效的数字。如果字符串包含非数字字符转换结果可能是NaN。String函数的显式转换反过来当你需要一个字符串类型时可以使用String函数将其他类型的值转换为字符串。String函数接收一个参数并返回其字符串表示形式。数字、布尔值、对象等都可以被转换为字符串。将数字转换为字符串的常见场景包括将数字显示在用户界面上、将数字作为URL参数传递、或者将数字与其他字符串拼接时希望明确地进行类型转换。除了String函数你还可以使用toString方法进行类型转换该方法几乎存在于所有JavaScript值上。例如const num 123const str num.toString()。参考代码示例// 字符串与数字的自动连接constcompanyFront;constnumber242;console.log(companynumber);// 将字符串转换为数字conststringNumber456;constconvertedNumberNumber(stringNumber);console.log(typeofconvertedNumber);console.log(convertedNumber100);// 将数字转换为字符串constoriginalNumber789;constconvertedStringString(originalNumber);console.log(typeofconvertedString);console.log(convertedStringabc);// 处理用户输入的典型场景constuserInput42;constuserInputAsNumberNumber(userInput);constdoubleduserInputAsNumber*2;console.log(doubled);字符串连接的多种方式使用加号进行传统连接在模板字面量出现之前加号运算符是连接字符串的主要方式。你可以使用加号将多个字符串片段和变量连接成一个完整的字符串。当连接多个部分时你需要仔细管理加号和空格的位置确保最终字符串的格式正确。传统连接方式的代码往往比较冗长尤其是当需要连接的变量较多时。例如const message “你好” name “你今年” age “岁”。这段代码中有多个加号和引号阅读起来不够直观。使用模板字面量进行现代连接模板字面量提供了更优雅的字符串连接方式。你不需要使用加号也不需要频繁地开启和关闭引号。只需要在${}中放入变量名变量就会被自动插入到合适的位置。对比上面的例子使用模板字面量可以写成const message 你好name你今年{name}你今年name你今年{age}岁。这段代码更加清晰变量和静态文本的区别一目了然引号和加号的数量也大大减少。参考代码示例constfirstName张;constlastName伟;constage28;// 使用加号连接constmessage1您好firstNamelastName先生您今年age岁;console.log(message1);// 使用模板字面量连接constmessage2您好${firstName}${lastName}先生您今年${age}岁;console.log(message2);// 多个变量的连接constcity上海;constoccupation工程师;constintro${firstName}${lastName}来自${city}是一名${occupation};console.log(intro);总结字符串是JavaScript中处理文本的核心工具。通过本文的学习我们掌握了创建字符串的三种方式理解了单引号、双引号和反引号的区别与适用场景。模板字面量的引入极大地提升了字符串构建的便捷性使变量嵌入、表达式计算和多行文本处理变得简单直观。引号转义技巧帮助我们解决字符串内部引号冲突的问题。字符串与数字之间的类型转换是处理用户输入和数据格式化的重要技能。掌握这些基础知识后你将在后续学习中更好地理解和运用JavaScript提供的丰富字符串方法。