JavaScript字符串方法全攻略，揭秘String类型的51个神奇法宝

揭秘 JavaScript String 的 51 个秘密武器：掌握字符串操控的艺术

作为 Web 开发人员，我们经常与字符串数据打交道。JavaScript 中的 String 类型为我们提供了丰富的工具和方法来操作这些字符串，使我们能够轻松地执行各种文本处理任务。

基本操作

这些方法构成了字符串操作的基础，可用于提取、连接、搜索和转换字符串。

• charAt()： 获取指定位置的字符。
• charCodeAt()： 获取指定位置字符的 Unicode 编码。
• concat()： 连接多个字符串。
• indexOf()： 查找子字符串的首次出现位置。
• lastIndexOf()： 查找子字符串的最后一次出现位置。
• length： 返回字符串长度。
• replace()： 替换子字符串。
• search()： 查找子字符串的首次出现位置（与 indexOf() 类似）。
• slice()： 截取指定范围的字符。
• split()： 按分隔符将字符串分割成数组。
• substring()： 截取指定范围的字符（与 slice() 类似）。
• toLocaleLowerCase()： 转换为小写（考虑语言环境）。
• toLocaleUpperCase()： 转换为大写（考虑语言环境）。
• toLowerCase()： 转换为小写。
• toUpperCase()： 转换为大写。
• trim()： 删除首尾空白。

const str = "Hello World!";

console.log(str.charAt(0)); // "H"
console.log(str.charCodeAt(0)); // 72
console.log(str.concat(" How are you?")); // "Hello World! How are you?"
console.log(str.indexOf("World")); // 6
console.log(str.lastIndexOf("World")); // 6
console.log(str.length); // 12
console.log(str.replace("World", "Earth")); // "Hello Earth!"
console.log(str.search("World")); // 6
console.log(str.slice(6)); // "World!"
console.log(str.split(" ")); // ["Hello", "World!"]
console.log(str.substring(6)); // "World!"
console.log(str.toLocaleLowerCase()); // "hello world!"
console.log(str.toLocaleUpperCase()); // "HELLO WORLD!"
console.log(str.toLowerCase()); // "hello world!"
console.log(str.toUpperCase()); // "HELLO WORLD!"
console.log(str.trim()); // "Hello World!"

高级操作

这些方法提供了更复杂的操作，如创建 HTML 元素和设置文本格式。

• anchor()： 创建 HTML 锚点元素。
• big()： 创建 HTML 大号字体元素。
• blink()： 创建 HTML 闪烁的文本元素。
• bold()： 创建 HTML 粗体文本元素。
• fixed()： 创建 HTML 固定宽度的文本元素。
• fontcolor()： 设置文本颜色。
• fontsize()： 设置文本大小。
• italics()： 创建 HTML 斜体文本元素。
• link()： 创建 HTML 链接元素。
• small()： 创建 HTML 小号字体元素。
• strike()： 创建 HTML 删除线文本元素。
• sub()： 创建 HTML 下标文本元素。
• sup()： 创建 HTML 上标文本元素。

const str = "Welcome to my website!";

console.log(str.anchor("https://example.com")); // "<a href="https://example.com">Welcome to my website!</a>"
console.log(str.big()); // "<big>Welcome to my website!</big>"
console.log(str.blink()); // "<blink>Welcome to my website!</blink>"
console.log(str.bold()); // "<b>Welcome to my website!</b>"
console.log(str.fixed()); // "<tt>Welcome to my website!</tt>"
console.log(str.fontcolor("red")); // "<font color="red">Welcome to my website!</font>"
console.log(str.fontsize(5)); // "<font size="5">Welcome to my website!</font>"
console.log(str.italics()); // "<i>Welcome to my website!</i>"
console.log(str.link("https://example.com")); // "<a href="https://example.com">Welcome to my website!</a>"
console.log(str.small()); // "<small>Welcome to my website!</small>"
console.log(str.strike()); // "<strike>Welcome to my website!</strike>"
console.log(str.sub()); // "<sub>Welcome to my website!</sub>"
console.log(str.sup()); // "<sup>Welcome to my website!</sup>"

编码和解码方法

这些方法可用于对字符串进行编码和解码，使其适合在 URL 和 URL 组件中使用。

• decodeURI()： 解码由 encodeURI() 编码的字符串。
• decodeURIComponent()： 解码由 encodeURIComponent() 编码的字符串。
• encodeURI()： 对字符串进行编码，使其可以在 URL 中使用。
• encodeURIComponent()： 对字符串进行编码，使其可以在 URL 组件中使用。

const str = "Hello World! This is my website!";

console.log(encodeURI(str)); // "Hello%20World!%20This%20is%20my%20website!"
console.log(decodeURI("Hello%20World!%20This%20is%20my%20website!")); // "Hello World! This is my website!"
console.log(encodeURIComponent(str)); // "Hello%20World%21%20This%20is%20my%20website%21"
console.log(decodeURIComponent("Hello%20World%21%20This%20is%20my%20website%21")); // "Hello World! This is my website!"

结论

JavaScript 中的 String 类型为我们提供了令人难以置信的灵活性，使我们能够轻松地操作和处理文本数据。通过熟练使用这些方法，我们可以编写高效、简洁的代码，提升我们的 Web 应用程序的性能。

常见问题解答

1. 有哪些方法可以连接字符串？

   • concat()

2. 如何查找子字符串的首次出现位置？

   • indexOf()

3. 如何将字符串转换为大写或小写？

   • toUpperCase() / toLowerCase()

4. 如何将字符串按分隔符分割成数组？

   • split()

5. 如何对字符串进行编码和解码？

   • encodeURI() / decodeURI(), encodeURIComponent() / decodeURIComponent()