JS String 对象

网站

JavaScript String 对象 - W3School

String - JavaScript | MDN

引入

字符串是 JS 里最常用的数据类型之一，用于保存一段文本内容。

String 对象提供了很多方法，用来操作和处理字符串，比如查找、替换、截取、拼接、大小写转换等。

正文

定义

定义

String 对象是 JS 内置的对象，用于保存和处理字符串。字符串本身不可变，所有字符串方法都会返回新字符串，不会修改原字符串。

创建字符串

最常见的方式是用引号包裹文本。

let message = "学习 JS";
let title = '字符串操作';

也可以使用模板字符串。

let name = "Tom";
let greeting = `你好，${name}`;

字符串长度

使用 length 属性获取字符串长度。

let text = "Hello";
 
console.log(text.length);

length 表示字符串包含多少个字符。

字符串拼接

使用 + 运算符可以拼接字符串。

let firstName = "Tom";
let lastName = "Lee";
let fullName = firstName + " " + lastName;
 
console.log(fullName);

使用 concat() 方法也可以拼接字符串。

let str1 = "Hello";
let str2 = " World";
let result = str1.concat(str2);
 
console.log(result);

查找字符串

`indexOf()`

用于查找某个子字符串在字符串中第一次出现的位置。

let text = "学习 JavaScript 很有趣";
 
console.log(text.indexOf("JavaScript"));

如果找不到，返回 -1。

console.log(text.indexOf("Python"));

`lastIndexOf()`

用于查找某个子字符串在字符串中最后一次出现的位置。

let text = "学习 JS，使用 JS 开发";
 
console.log(text.lastIndexOf("JS"));

`includes()`

用于判断字符串是否包含某个子字符串。

let text = "学习 JavaScript";
 
console.log(text.includes("Java"));
console.log(text.includes("Python"));

返回 true 或 false。

截取字符串

`slice()`

用于提取字符串的一部分。

let text = "Hello World";
 
console.log(text.slice(0, 5));
console.log(text.slice(6));

slice(start, end) 表示从 start 开始，到 end 结束，不包括 end 位置的字符。

如果只写一个参数，表示从这个位置一直截取到末尾。

`substring()`

和 slice() 类似，也是截取字符串。

let text = "JavaScript";
 
console.log(text.substring(0, 4));
console.log(text.substring(4));

`substr()`

用于从指定位置开始，截取指定长度的字符串。

let text = "Hello World";
 
console.log(text.substr(0, 5));
console.log(text.substr(6, 5));

注意：substr() 已经不推荐使用，建议用 slice() 或 substring()。

替换字符串

`replace()`

用于替换字符串中的内容。

let text = "学习 Java";
let newText = text.replace("Java", "JavaScript");
 
console.log(newText);

replace() 默认只替换第一个匹配的内容。

let text = "学习 JS，使用 JS 开发";
let newText = text.replace("JS", "JavaScript");
 
console.log(newText);

如果要替换所有匹配内容，可以用正则表达式。

let text = "学习 JS，使用 JS 开发";
let newText = text.replace(/JS/g, "JavaScript");
 
console.log(newText);

`replaceAll()`

用于替换字符串中所有匹配的内容。

let text = "学习 JS，使用 JS 开发";
let newText = text.replaceAll("JS", "JavaScript");
 
console.log(newText);

大小写转换

`toUpperCase()`

把字符串转换为大写。

let text = "hello";
 
console.log(text.toUpperCase());

`toLowerCase()`

把字符串转换为小写。

let text = "HELLO";
 
console.log(text.toLowerCase());

去除空格

`trim()`

用于去除字符串两端的空格。

let text = "  Hello World  ";
 
console.log(text.trim());

常用于处理用户输入的内容。

<input type="text" id="username" />

const input = document.querySelector("#username");
let value = input.value.trim();
 
console.log(value);

`trimStart()` 和 `trimEnd()`

trimStart() 去除字符串开头的空格，trimEnd() 去除字符串末尾的空格。

let text = "  Hello  ";
 
console.log(text.trimStart());
console.log(text.trimEnd());

拆分字符串

`split()`

用于把字符串拆分成数组。

let text = "HTML,CSS,JS";
let arr = text.split(",");
 
console.log(arr);

split(",") 表示按 , 拆分字符串。

let text = "学习 JavaScript";
let arr = text.split(" ");
 
console.log(arr);

拆分后可以方便地遍历或处理每一部分内容。

获取字符

`charAt()`

用于获取字符串中指定位置的字符。

let text = "Hello";
 
console.log(text.charAt(0));
console.log(text.charAt(1));

字符串下标从 0 开始。

使用下标

也可以直接用下标获取字符。

let text = "Hello";
 
console.log(text[0]);
console.log(text[1]);

`charCodeAt()`

用于获取字符串中指定位置字符的 Unicode 编码。

let text = "ABC";
 
console.log(text.charCodeAt(0)); // 结果 65
console.log(text.charCodeAt(1)); // 结果 66

常用于编码转换、加密解密等场景。

从字符编码创建字符串

`String.fromCharCode()`

这是 String 对象的静态方法，用于根据 Unicode 编码创建字符串。

let text = String.fromCharCode(65, 66, 67);
 
console.log(text); // 结果 ABC

常用于 Base64 转换、编码解码等场景。

重复字符串

`repeat()`

用于重复字符串指定次数。

let text = "JS ";
 
console.log(text.repeat(3));

判断开头和结尾

`startsWith()`

判断字符串是否以某个子字符串开头。

let text = "学习 JavaScript";
 
console.log(text.startsWith("学习"));
console.log(text.startsWith("JS"));

`endsWith()`

判断字符串是否以某个子字符串结尾。

let text = "index.html";
 
console.log(text.endsWith(".html"));
console.log(text.endsWith(".js"));

填充字符串

`padStart()`

用于在字符串开头填充字符，直到达到指定长度。

let text = "5";
 
console.log(text.padStart(3, "0"));

常用于格式化数字、时间等。

let hour = "9";
let minute = "5";
 
console.log(hour.padStart(2, "0") + ":" + minute.padStart(2, "0"));

`padEnd()`

用于在字符串末尾填充字符，直到达到指定长度。

let text = "123";
 
console.log(text.padEnd(5, "0"));

匹配字符串

`match()`

用于在字符串中查找匹配的内容，通常配合正则表达式使用。

let text = "学习 JS 2024";
let result = text.match(/\d+/);
 
console.log(result);

`search()`

用于在字符串中搜索指定内容，返回第一次出现的位置。

let text = "学习 JavaScript";
 
console.log(text.search("JavaScript"));

也可以配合正则表达式使用。

let text = "学习 JS 2024";
 
console.log(text.search(/\d+/));

本地化比较

`localeCompare()`

用于比较两个字符串，考虑本地化规则。

let str1 = "apple";
let str2 = "banana";
 
console.log(str1.localeCompare(str2));

返回值：

负数表示 str1 在 str2 前面
0 表示两个字符串相等
正数表示 str1 在 str2 后面

常见方法

方法	作用
`length`	获取字符串长度
`indexOf(str)`	查找子字符串第一次出现的位置
`includes(str)`	判断是否包含子字符串
`slice(start, end)`	截取字符串
`replace(old, new)`	替换字符串内容
`toUpperCase()`	转换为大写
`toLowerCase()`	转换为小写
`trim()`	去除两端空格
`split(separator)`	拆分字符串为数组
`charAt(index)`	获取指定位置的字符
`charCodeAt(index)`	获取指定位置字符的 Unicode 编码
`String.fromCharCode(code)`	根据 Unicode 编码创建字符串
`startsWith(str)`	判断是否以某字符串开头
`endsWith(str)`	判断是否以某字符串结尾
`padStart(len, str)`	在开头填充字符到指定长度
`padEnd(len, str)`	在末尾填充字符到指定长度
`repeat(count)`	重复字符串指定次数
`match(regexp)`	查找匹配的内容
`search(str)`	搜索指定内容的位置

例子

处理用户输入

<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.trim();
 
  if (value === "") {
    console.log("用户名不能为空");
  } else {
    console.log("用户名是：" + value);
  }
});

格式化文本

let text = "hello world";
let result = text.charAt(0).toUpperCase() + text.slice(1);
 
console.log(result);

提取文件扩展名

let filename = "index.html";
let ext = filename.slice(filename.lastIndexOf(".") + 1);
 
console.log(ext);

拆分标签

let tags = "HTML,CSS,JavaScript";
let arr = tags.split(",");
 
arr.forEach(function (tag) {
  console.log(tag);
});

Base64 编码转换

let text = "Hello";
let codes = [];
 
for (let i = 0; i < text.length; i++) {
  codes.push(text.charCodeAt(i));
}
 
console.log(codes);
 
let decoded = String.fromCharCode(...codes);
 
console.log(decoded);

格式化时间

let hour = 9;
let minute = 5;
let second = 3;
 
let time = String(hour).padStart(2, "0") + ":" + 
           String(minute).padStart(2, "0") + ":" + 
           String(second).padStart(2, "0");
 
console.log(time);

特点

字符串创建后不可修改，字符串方法都会返回新字符串
String 对象提供了很多方法用于处理字符串
字符串下标从 0 开始
indexOf() 找不到时返回 -1
includes() 返回布尔值 true 或 false
trim() 常用于处理用户输入
split() 用于把字符串拆分成数组
charCodeAt() 和 String.fromCharCode() 用于字符和编码之间的转换
padStart() 和 padEnd() 常用于格式化数字和时间
字符串方法不会修改原字符串，需要用新变量保存结果
String.fromCharCode() 是静态方法，直接通过 String 调用

理解

字符串方法可以理解为对文本内容的加工工具。

原始文本放进去，经过处理后得到新的文本。

重点是记住字符串不可变，所有方法都返回新字符串，原字符串不会改变。

实际开发中，字符串方法经常配合用户输入、数据处理、格式化等场景使用。

引出

理解了字符串方法之后，可以继续学习 JS 字符串，了解字符串的基础知识。

后续可以结合 JS 函数和 JS DOM API，实现更复杂的文本处理功能。

Ceryn

探索

网站

引入

正文

定义

创建字符串

字符串长度

字符串拼接

查找字符串

indexOf()

lastIndexOf()

includes()

截取字符串

slice()

substring()

substr()

替换字符串

replace()

replaceAll()

大小写转换

toUpperCase()

toLowerCase()

去除空格

trim()

trimStart() 和 trimEnd()

拆分字符串

split()

获取字符

charAt()

使用下标

charCodeAt()

从字符编码创建字符串

String.fromCharCode()

重复字符串

repeat()

判断开头和结尾

startsWith()

endsWith()

填充字符串

padStart()

padEnd()

匹配字符串

match()

search()

本地化比较

localeCompare()

常见方法

例子

处理用户输入

格式化文本

提取文件扩展名

拆分标签

Base64 编码转换

格式化时间

特点

理解

引出

关系图谱

目录

反向链接

`indexOf()`

`lastIndexOf()`

`includes()`

`slice()`

`substring()`

`substr()`

`replace()`

`replaceAll()`

`toUpperCase()`

`toLowerCase()`

`trim()`

`trimStart()` 和 `trimEnd()`

`split()`

`charAt()`

`charCodeAt()`

`String.fromCharCode()`

`repeat()`

`startsWith()`

`endsWith()`

`padStart()`

`padEnd()`

`match()`

`search()`

`localeCompare()`