JavaScript 字符串
你已经知道值可以是 string。本课专注文本:用引号书写、统计字符、拼接片段、在字符串里放引号,以及在页面上显示消息。slice、toUpperCase 等工具放在下一课。
JavaScript 中的字符串如何工作?
字符串是引擎当作一个值处理的文本。用单引号、双引号或反引号(`)书写。"你好" 和 '你好' 都是字符串;不带引号的 42 是数字。length 属性给出字符数(空格也算)。用 + 拼接,或用模板字面量和 ${…} 拼一行。反斜杠(\)可在同种引号内放入引号。要给用户看,用 textContent。
字符串工具箱
📊 初学者先用的文本工具
| 想法 | 示例 | 结果 / 说明 |
|---|---|---|
| 双引号 | let s = "Hi"; |
类型 string |
| 单引号 | let s = 'Hi'; |
同一类型 string |
length |
"Hi".length |
2(字符) |
用 + 拼接 |
"Hi" + "!" |
"Hi!" |
| 转义 | "Say \"hi\"" |
同风格引号在内 |
| 模板 | ` Hi, ${name} ` |
插入 name 的值 |
用引号写文本
选一种引号风格并用同种关闭。"" 是合法的空字符串。
let greeting = "Hello";
let city = 'Tehran';
console.log(greeting);
console.log(city);
console.log(typeof greeting);
用 length 统计字符
length 是属性不是函数——写 .length,不要写 .length()。空格也算字符。
let word = "JavaScript";
console.log(word.length);
console.log("Hi there".length);
用 + 拼接字符串
+ 运算符把文本粘在一起。一侧是字符串时,另一侧常会变成文本——因此 "Score: " + 10 得到 "Score: 10"。混用数字和文本时要记住这一点。
let first = "Ada";
let last = "Lovelace";
let full = first + " " + last;
console.log(full);
console.log("Score: " + 10);
在字符串里放引号
两个简单办法:换引号风格,或用反斜杠转义。
let a = "She said \"hello\"";
let b = 'It\'s ready';
console.log(a);
console.log(b);
模板字面量(反引号)
反引号可写字符串并用 ${…} 插入值——适合混有词语和变量的消息。
let name = "Sam";
let line = `Hello, ${name}!`;
console.log(line);
在页面上显示字符串
拼好消息,再用 textContent 赋值,让段落显示纯文本。
<!DOCTYPE html>
<html>
<head>
<title>Strings — greeting on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let user = "guest";
let msg = `Welcome, ${user}!`;
document.getElementById("out").textContent = msg;
</script>
</body>
</html>
段落显示问候。只改 user,刷新,确认新行。
自己试试
- 各建一个双引号与单引号的
let;打印两者和typeof。 - 对
"JavaScript"和带空格的短句打印.length。 - 用
+和空格拼接名与姓;打印结果。 - 写含撇号或双引号的字符串(转义或换风格)。
- 用
let name写出`Hello, ${name}!`并打印。 - 在 HTML 演示里只改
user,刷新,读新问候。
常见错误
- 写
let s = Hello;却不加引号——引擎会找名为Hello的变量 - 用
"打开却用'关闭(或反过来) - 把
length()当函数调用——应写.length - 以为
"5" + 5一定是数字加法——有字符串时+常做拼接 - 基础未稳就跳进大量字符串方法(下一课再讲)
小结
- 字符串是
'…'、"…"或`…`里的文本 length统计字符;它是属性- 用
+拼接,或用带${…}的模板字面量 - 用
\转义同风格引号,或换引号风格 - 下一课:字符串方法——如
slice、replace与大小写
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部