网站

JavaScript 字符串 - W3School

String - JavaScript | MDN

引入

字符串用于保存一段文本内容。

网页里的标题、用户输入的内容、提示信息、网址、文件名,都需要用字符串来保存。

正文

定义

定义

字符串是用来存储一系列字符的数据类型,创建后不能直接修改,只能用新字符串替换。

创建字符串

使用 ""'' 成对包裹文本。

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 常量let 变量 声明。

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 属性用于获取字符串长度
  • 字符串可以用 constlet 声明

理解

字符串可以理解为保存文本的容器。

重点是记住字符串不可变,修改字符串实际上是创建新字符串。

模板字符串是更现代的写法,拼接变量时比 + 更清楚。

实际开发中,字符串经常配合用户输入、数据展示、文本处理等场景使用。

引出

理解了字符串之后,可以继续学习 JS String 对象,了解更多字符串操作方法。

也可以结合 JS 常量JS 变量,知道如何保存字符串数据。