网站
引入
字符串用于保存一段文本内容。
网页里的标题、用户输入的内容、提示信息、网址、文件名,都需要用字符串来保存。
正文
定义
定义
字符串是用来存储一系列字符的数据类型,创建后不能直接修改,只能用新字符串替换。
创建字符串
使用 "" 或 '' 成对包裹文本。
let title = "学习 JS";
let message = '你好';双引号和单引号作用一样,选一种习惯用就行。
字符串不可变
字符串创建后,不能直接修改里面的内容。
let text = "Hello";
text[0] = "h";
console.log(text);上面的代码不会把 H 改成 h,字符串内容不会变。
如果要修改,只能用新字符串替换。
let text = "Hello";
text = "hello";
console.log(text);字符串拼接
使用 + 可以拼接字符串。
let firstName = "Tom";
let lastName = "Lee";
let fullName = firstName + " " + lastName;
console.log(fullName);使用 += 可以为某个字符串加上其他字符串。
let message = "学习";
message += " JavaScript";
console.log(message);也可以使用 concat() 方法。
let str1 = "Hello";
let str2 = " World";
let result = str1.concat(str2);
console.log(result);模板字符串
使用反引号 ` 包裹文本,可以更方便地插入变量。
let name = "Tom";
let age = 18;
let message = `我是 ${name},今年 ${age} 岁`;
console.log(message);${} 里可以放变量或表达式。
let a = 10;
let b = 20;
let result = `${a} + ${b} = ${a + b}`;
console.log(result);模板字符串可以换行。
let text = `第一行
第二行
第三行`;
console.log(text);转义字符
字符串里如果要包含特殊字符,可以用 \ 转义。
let text = "他说:\"学习 JS 很有趣\"";
console.log(text);常见转义字符:
| 转义字符 | 含义 |
|---|---|
\" | 双引号 |
\' | 单引号 |
\\ | 反斜杠 |
\n | 换行 |
\t | 制表符 |
let text = "第一行\n第二行";
console.log(text);声明方式
const siteName = "学习笔记";
let userName = "Tom";如果字符串内容不会修改,建议用 const。
字符串长度
使用 length 属性获取字符串长度。
let text = "Hello";
console.log(text.length);length 表示字符串包含多少个字符。
let text = "学习 JS";
console.log(text.length);获取字符
可以用下标获取字符串中的某个字符。
let text = "Hello";
console.log(text[0]);
console.log(text[1]);字符串下标从 0 开始。
常见写法
| 写法 | 作用 |
|---|---|
let text = "Hello"; | 用双引号创建字符串 |
let text = 'Hello'; | 用单引号创建字符串 |
let text = `Hello`; | 用模板字符串创建 |
text1 + text2 | 拼接字符串 |
`你好,${name}` | 在模板字符串中插入变量 |
text.length | 获取字符串长度 |
text[0] | 获取第一个字符 |
例子
拼接用户信息
let firstName = "Tom";
let lastName = "Lee";
let fullName = firstName + " " + lastName;
console.log(fullName);使用模板字符串
let productName = "笔记本";
let price = 5000;
let message = `商品:${productName},价格:${price} 元`;
console.log(message);获取输入内容
<input type="text" id="username" />
<button id="btn">提交</button>const input = document.querySelector("#username");
const btn = document.querySelector("#btn");
btn.addEventListener("click", function () {
let value = input.value;
console.log("用户输入的内容是:" + value);
});特点
- 字符串用于保存文本内容
- 使用
""、''或`包裹文本 - 字符串创建后不能直接修改
- 使用
+可以拼接字符串 - 模板字符串可以更方便地插入变量
- 字符串下标从
0开始 length属性用于获取字符串长度- 字符串可以用
const或let声明
理解
字符串可以理解为保存文本的容器。
重点是记住字符串不可变,修改字符串实际上是创建新字符串。
模板字符串是更现代的写法,拼接变量时比 + 更清楚。
实际开发中,字符串经常配合用户输入、数据展示、文本处理等场景使用。
引出
理解了字符串之后,可以继续学习 JS String 对象,了解更多字符串操作方法。