为什么说 String 是 JavaScript 中“最安静却最危险”的类型



大家好,我是 31 岁、爱折腾代码、也爱把技术讲成故事的小米。

如果你写 JavaScript 的时间够久,一定会有一种感觉:

JS 里最熟悉、用得最多、但又最容易被忽略的类型,就是 String。

我们天天在用它,却很少认真"聊一聊它"。于是有一天,我在敲代码的时候突然脑补了一个画面:

String 不是字符串,它是一个庞大的"文字王国"。

今天这篇文章,我就带你跟着我,一起走进 JavaScript 的文字王国,看看 String 这个"老朋友",到底藏了多少你可能没认真想过的秘密。

字符字面量:文字王国的"入口大门"

故事要从"进城"说起。在 JavaScript 里,只要你想进入文字王国,就必须从字符字面量这几扇大门进去。

1、三种最常见的字符字面量

在 JS 里,字符串可以用:

  • 双引号 "
  • 单引号 '
  • 反引号 `(模板字面量)

我第一次学 JS 的时候,特别纠结: "老师,到底用单引号还是双引号?"

后来工作几年才发现:JavaScript 本身不在乎,项目规范才在乎。

2、转义字符:城门的"暗号"

如果你想在字符串里放一些"特殊角色",就得用转义字符。

常见转义字符对照表:

在文字王国里,反斜杠就像"通行证",告诉 JS:后面这个字符别按原来的意思理解。

字符串的特点:文字王国的"基本国法"

进了城,总要先了解这个国家的基本规则。

1、字符串是"不可变的"

这是 String 最重要、也是最容易被忽略的一点:字符串一旦创建,就不可被修改。

你以为你在改字符串,实际上 JS 在心里冷冷地对你说了一句:"对不起,本国不支持原地修改。"

你真正能做的,只是创建一个新字符串。

字符串就像一块已经烤好的蛋糕,你不能从中间挖一块再塞回去,你只能重新烤一块新的。

2、字符串有 length,但不是数组

很多新人一看到 str0,就误以为字符串是数组。

错。 字符串只是 "像数组一样可读" ,但本质不是数组。

转换为字符串:跨国公民的"身份转换"。

在文字王国里,经常会有"外来人口",比如:数字、布尔值、对象......他们想进城,就必须变成字符串。

1、使用 String()

这是最安全、最通用的方式。

2、使用 toString()

但要注意:

3、经验总结

4、隐式转换(不推荐但你一定见过)

这是 JS 在背后偷偷做的事情。小米的忠告是:面试可以说,代码里少用。

模板字面量:文字王国的"高级语法"

ES6 之后,文字王国迎来了一次"技术革命"。

1、模板字面量登场

你第一次用模板字面量时,一定会有一种感觉:"以前那堆 + 拼字符串的日子,终于结束了。"

2、支持多行字符串

不用 \n,不用拼接,写什么样,就是什么样。

字符串插值:让字符串"活起来"

模板字面量真正的灵魂,是字符串插值。

${} 里:

  • 可以写变量
  • 可以写表达式
  • 可以写函数调用

本质理解

字符串插值不是"拼接字符串",而是 "在字符串里执行 JavaScript 表达式"。

模板字面量标签函数:文字王国的"翻译官"

接下来这一部分,是很多人见过,但没用过,也没搞懂的高级玩法。

1、什么是标签函数?

输出结果:

解释一下

  • strings:被 ${} 分割后的字符串数组
  • values:插值表达式的值

2、标签函数能干嘛?

示例:防止 XSS

现实意义

  • 模板引擎
  • SQL 构建
  • XSS 防护
  • 国际化文本处理

可以理解为:标签函数 = 字符串的"预处理器"。

原始字符串:不被转义的"原貌文本"

最后一个点,非常细,但非常有用。

1、什么是原始字符串?

String.raw 会保留字符串的原始内容。

2、使用场景

适合:

  • 正则表达式
  • Windows 路径
  • 需要精确字符的场景

一句话总结

原始字符串,就是"我写什么,你就给我什么"。

总结:String 不简单,只是你太熟了

写到这里,小米想说一句掏心窝子的:

String 是 JavaScript 里最基础的类型之一,也是最容易被低估的类型之一。

你天天在用它,但真正理解它的不可变性、模板能力、标签函数之后,你会发现:

  • 代码更优雅
  • 思路更清晰
  • 面试也更有底气

END

我是小米,一个喜欢分享技术的31岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号"软件求生",获取更多技术干货!

好朋友们,我们下篇见。

相关推荐
福兮说2 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理2 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6663 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
凤城老人3 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)3 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan4 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_4 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒5 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技5 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu5 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub