跳到主要内容

JavaScript 字符串方法

字符串是JavaScript中最常用的数据类型之一,而JavaScript提供了丰富的内置方法,使我们能够轻松地操作和处理字符串。本文将全面介绍JavaScript中常用的字符串方法,帮助你更高效地处理文本数据。

什么是字符串方法?

字符串方法是JavaScript内置的函数,它们允许你对字符串执行各种操作,如搜索、替换、提取和转换文本。这些方法使得文本处理变得简单而强大。

基础字符串方法

字符串长度

要获取字符串的长度,可以使用length属性:

javascript
const message = "Hello, World!";
console.log(message.length); // 输出: 13

大小写转换

javascript
const text = "Hello JavaScript";

// 转换为大写
console.log(text.toUpperCase()); // 输出: "HELLO JAVASCRIPT"

// 转换为小写
console.log(text.toLowerCase()); // 输出: "hello javascript"

字符串查找

charAt()

返回指定索引位置的字符:

javascript
const text = "JavaScript";
console.log(text.charAt(0)); // 输出: "J"
console.log(text.charAt(4)); // 输出: "S"

indexOf() 和 lastIndexOf()

查找子字符串的位置:

javascript
const sentence = "JavaScript is amazing. JavaScript is fun.";

// 从前向后查找
console.log(sentence.indexOf("JavaScript")); // 输出: 0

// 从指定位置开始查找
console.log(sentence.indexOf("JavaScript", 5)); // 输出: 25

// 从后向前查找
console.log(sentence.lastIndexOf("JavaScript")); // 输出: 25
备注

如果找不到匹配项,indexOf()lastIndexOf() 都返回 -1。

includes()

检查字符串是否包含特定子字符串:

javascript
const text = "Learn JavaScript today!";
console.log(text.includes("JavaScript")); // 输出: true
console.log(text.includes("Python")); // 输出: false

startsWith() 和 endsWith()

检查字符串是否以特定子字符串开始或结束:

javascript
const filename = "document.pdf";
console.log(filename.startsWith("doc")); // 输出: true
console.log(filename.endsWith(".pdf")); // 输出: true
console.log(filename.endsWith(".txt")); // 输出: false

字符串提取方法

slice()

从字符串中提取部分内容:

javascript
const text = "JavaScript is fun";
console.log(text.slice(0, 10)); // 输出: "JavaScript"
console.log(text.slice(11)); // 输出: "is fun"
console.log(text.slice(-3)); // 输出: "fun"

substring()

类似于slice(),但不接受负索引:

javascript
const text = "JavaScript is fun";
console.log(text.substring(0, 10)); // 输出: "JavaScript"
console.log(text.substring(11)); // 输出: "is fun"

substr()

从指定位置提取指定长度的字符:

javascript
const text = "JavaScript is fun";
console.log(text.substr(0, 10)); // 输出: "JavaScript"
console.log(text.substr(11, 2)); // 输出: "is"
警告

substr()方法已被弃用,建议使用slice()substring()代替。

字符串修改方法

replace() 和 replaceAll()

替换字符串中的内容:

javascript
// replace() - 仅替换第一个匹配项
let text = "JavaScript is great. JavaScript is powerful.";
let newText = text.replace("JavaScript", "JS");
console.log(newText); // 输出: "JS is great. JavaScript is powerful."

// replaceAll() - 替换所有匹配项
newText = text.replaceAll("JavaScript", "JS");
console.log(newText); // 输出: "JS is great. JS is powerful."
提示

对于replace(),如果要替换所有匹配项,可以使用正则表达式:

javascript
let newText = text.replace(/JavaScript/g, "JS");

trim(), trimStart(), trimEnd()

移除字符串两端的空白字符:

javascript
const text = "  Hello World!  ";
console.log(text.trim()); // 输出: "Hello World!"
console.log(text.trimStart()); // 输出: "Hello World! "
console.log(text.trimEnd()); // 输出: " Hello World!"

padStart() 和 padEnd()

填充字符串到指定长度:

javascript
const num = "5";
console.log(num.padStart(3, "0")); // 输出: "005"
console.log(num.padEnd(3, "0")); // 输出: "500"

repeat()

重复字符串指定次数:

javascript
const star = "*";
console.log(star.repeat(5)); // 输出: "*****"

字符串分割与合并

split()

将字符串分割成数组:

javascript
const fruits = "apple,banana,orange,grape";
const fruitArray = fruits.split(",");
console.log(fruitArray); // 输出: ["apple", "banana", "orange", "grape"]

// 限制返回的数组长度
console.log(fruits.split(",", 2)); // 输出: ["apple", "banana"]

// 分割成字符
const text = "hello";
console.log(text.split("")); // 输出: ["h", "e", "l", "l", "o"]

concat()

连接两个或多个字符串:

javascript
const str1 = "Hello";
const str2 = "World";
console.log(str1.concat(" ", str2)); // 输出: "Hello World"

// 可以连接多个字符串
console.log(str1.concat(" ", str2, "!", " How are you?")); // 输出: "Hello World! How are you?"
备注

虽然concat()方法存在,但在实际开发中更常用的是字符串加号(+)运算符来连接字符串。

字符串搜索与匹配

match()

使用正则表达式搜索字符串:

javascript
const text = "The rain in SPAIN stays mainly in the plain";
const matches = text.match(/ain/g);
console.log(matches); // 输出: ["ain", "ain", "ain"]

matchAll()

返回包含所有匹配项及其捕获组的迭代器:

javascript
const text = "test1 test2 test3";
const regex = /test(\d)/g;
const matches = [...text.matchAll(regex)];

console.log(matches[0]); // 输出: ["test1", "1"]
console.log(matches[1]); // 输出: ["test2", "2"]

查找匹配正则表达式的索引:

javascript
const text = "Hello World!";
console.log(text.search(/World/)); // 输出: 6

实际应用场景

表单验证

javascript
function validateEmail(email) {
// 简单的邮箱验证
if (!email.includes('@') || !email.includes('.')) {
return false;
}

// 检查邮箱名称不为空
const parts = email.split('@');
if (parts[0].trim().length === 0) {
return false;
}

return true;
}

console.log(validateEmail("user@example.com")); // 输出: true
console.log(validateEmail("invalid-email")); // 输出: false

格式化文本

javascript
function formatCreditCard(cardNumber) {
// 移除所有非数字字符
const cleaned = cardNumber.replace(/\D/g, '');

// 分割成4个数字一组
const chunks = [];
for (let i = 0; i < cleaned.length; i += 4) {
chunks.push(cleaned.slice(i, i + 4));
}

// 连接并返回
return chunks.join('-');
}

console.log(formatCreditCard("1234567890123456")); // 输出: "1234-5678-9012-3456"
console.log(formatCreditCard("1234 5678 9012 3456")); // 输出: "1234-5678-9012-3456"

文本截断

javascript
function truncateText(text, maxLength) {
if (text.length <= maxLength) {
return text;
}
return text.slice(0, maxLength) + '...';
}

console.log(truncateText("JavaScript是一种非常流行的编程语言", 10)); // 输出: "JavaScript..."

URL 参数解析

javascript
function getUrlParameters(url) {
// 获取问号之后的部分
const paramString = url.split('?')[1];
if (!paramString) return {};

const params = {};
// 分割每个参数
const paramPairs = paramString.split('&');

for (const pair of paramPairs) {
const [key, value] = pair.split('=');
params[key] = decodeURIComponent(value || '');
}

return params;
}

const url = "https://example.com/search?query=javascript&limit=10&page=2";
console.log(getUrlParameters(url));
// 输出: { query: "javascript", limit: "10", page: "2" }

总结

JavaScript提供了丰富的字符串方法,使我们能够轻松地操作和处理文本数据。这些方法可以分为几大类:

  • 字符串查找方法:charAt(), indexOf(), includes()
  • 字符串提取方法:slice(), substring()
  • 字符串修改方法:replace(), trim()
  • 字符串分割与合并方法:split(), concat()

掌握这些字符串方法将大大提高你处理文本数据的能力,使你的JavaScript代码更加高效和简洁。

练习

为了巩固所学知识,尝试完成以下练习:

  1. 编写一个函数,将驼峰命名(camelCase)转换为短横线命名(kebab-case)。 例如:convertToKebabCase("helloWorld") 应返回 "hello-world"

  2. 创建一个函数,从一段文本中提取所有电子邮件地址。

  3. 实现一个简单的模板引擎,将字符串中的 {{变量名}} 替换为对应的值。 例如:template("Hello, {{name}}!", {name: "John"}) 应返回 "Hello, John!"

扩展阅读

要深入了解JavaScript字符串,建议查阅以下资源: