跳到主要内容

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字符串，建议查阅以下资源：