跳到主要内容

JavaScript 字符串截取

在JavaScript编程中,字符串截取是一项非常基础且常用的操作。无论是处理用户输入、格式化数据还是进行文本分析,我们都需要能够从一个字符串中提取特定的部分。本文将详细介绍JavaScript中进行字符串截取的不同方法,帮助你掌握这一重要技能。

什么是字符串截取?

字符串截取指的是从一个字符串中提取出一部分子字符串的过程。在JavaScript中,我们有多种方法可以实现这一功能:

  • substring() 方法
  • slice() 方法
  • substr() 方法(已弃用,不推荐使用)
备注

JavaScript中的字符串是从0开始索引的,也就是说第一个字符的索引是0,第二个字符的索引是1,以此类推。

让我们逐一探讨这些方法的用法和特点。

substring() 方法

substring() 方法接收两个参数:起始索引和结束索引(可选)。它返回原始字符串中从起始索引到结束索引(不包含结束索引处的字符)的子字符串。

语法

javascript
string.substring(startIndex, endIndex)
  • startIndex:必需,表示截取的开始位置
  • endIndex:可选,表示截取的结束位置(不包含在返回结果中)。如果省略,则截取到字符串结尾。

示例

javascript
let message = "Hello, World!";
let result = message.substring(0, 5);
console.log(result); // 输出: Hello

在这个例子中,我们从索引0开始截取到索引5(不包含索引5的字符)。

substring()的特点

  • 如果 startIndex 等于 endIndex,返回空字符串
  • 如果省略 endIndex,则提取到字符串的末尾
  • 如果任一参数小于0或为NaN,则被视为0
  • 如果任一参数大于字符串长度,则被视为字符串长度
  • 如果 startIndex 大于 endIndex,两个参数会交换位置
javascript
let text = "Hello World";
console.log(text.substring(6, 11)); // 输出: World
console.log(text.substring(11, 6)); // 输出: World (参数交换)
console.log(text.substring(6)); // 输出: World (省略endIndex)
console.log(text.substring(-3, 2)); // 输出: He (负数被视为0)

slice() 方法

slice() 方法也用于提取字符串的一部分,并返回一个新的字符串,而不修改原始字符串。

语法

javascript
string.slice(startIndex, endIndex)
  • startIndex:必需,表示截取的开始位置
  • endIndex:可选,表示截取的结束位置(不包含在返回结果中)。如果省略,则截取到字符串结尾。

示例

javascript
let message = "Hello, World!";
let result = message.slice(7, 12);
console.log(result); // 输出: World

slice()的特点

  • 如果参数为负数,则从字符串末尾开始计数
  • 如果 startIndex 大于 endIndex,返回空字符串
  • 其他行为与 substring() 类似
javascript
let text = "Hello World";
console.log(text.slice(6, 11)); // 输出: World
console.log(text.slice(-5)); // 输出: World (从末尾计数)
console.log(text.slice(-5, -1)); // 输出: Worl (从末尾计数)
console.log(text.slice(11, 6)); // 输出: "" (空字符串)

substr() 方法(不推荐使用)

注意

substr() 方法已被ECMAScript标准弃用,虽然多数浏览器仍然支持,但不建议在新代码中使用。

substr() 方法接收两个参数:起始索引和要提取的字符数。

语法

javascript
string.substr(startIndex, length)
  • startIndex:必需,表示截取的开始位置
  • length:可选,表示要提取的字符数。如果省略,则提取到字符串结尾。

示例

javascript
let message = "Hello, World!";
let result = message.substr(7, 5);
console.log(result); // 输出: World

substring() 和 slice() 的对比

虽然 substring()slice() 很相似,但它们在处理特殊情况时有所不同:

javascript
let text = "Hello World";

// 处理负值
console.log(text.substring(-3)); // 输出: Hello World (负值被视为0)
console.log(text.slice(-3)); // 输出: rld (从末尾数第3个字符开始)

// 处理参数顺序
console.log(text.substring(8, 3)); // 输出: lo Wo (参数交换为3, 8)
console.log(text.slice(8, 3)); // 输出: "" (空字符串,因为起点>终点)

实际应用案例

案例1:提取文件扩展名

javascript
function getFileExtension(filename) {
return filename.slice(filename.lastIndexOf('.'));
}

console.log(getFileExtension('document.pdf')); // 输出: .pdf
console.log(getFileExtension('image.jpg')); // 输出: .jpg

案例2:隐藏电话号码的中间部分

javascript
function maskPhoneNumber(phone) {
if (phone.length !== 11) return "Invalid phone number";
return phone.substring(0, 3) + '****' + phone.substring(7);
}

console.log(maskPhoneNumber('13912345678')); // 输出: 139****5678

案例3:截取URL的查询参数

javascript
function getQueryParam(url, param) {
// 找到参数部分
let queryString = url.slice(url.indexOf('?') + 1);
// 分割参数
let params = queryString.split('&');

for (let i = 0; i < params.length; i++) {
let pair = params[i].split('=');
if (pair[0] === param) {
return pair[1];
}
}
return null;
}

let url = "https://example.com/search?query=javascript&category=tutorial";
console.log(getQueryParam(url, 'query')); // 输出: javascript
console.log(getQueryParam(url, 'category')); // 输出: tutorial

字符串截取的性能考虑

在大多数情况下,substring()slice() 的性能差异可以忽略不计。但是对于大型字符串或性能关键的应用,slice() 通常比 substring() 稍快,尤其是在处理大字符串时。

此外,如果你需要处理负索引,slice() 是更好的选择,因为它可以直接支持从字符串末尾开始计数。

总结

JavaScript提供了多种字符串截取的方法,其中最常用的是 substring()slice()

  • substring(startIndex, endIndex): 不支持负索引,会交换顺序错误的参数
  • slice(startIndex, endIndex): 支持负索引,如果参数顺序错误则返回空字符串
  • substr(startIndex, length): 已弃用,接受起始位置和长度作为参数

对于初学者来说,建议主要使用 slice() 方法,因为它具有更一致的行为,并支持负索引,使从字符串末尾截取变得更加简单。

练习题

  1. 编写一个函数,提取字符串中的前n个字符。
  2. 编写一个函数,从URL中提取域名部分。
  3. 编写一个函数,将长文本截断为指定长度,并在末尾添加"..."。

扩展阅读

通过掌握这些字符串截取方法,你将能够更加高效地处理JavaScript中的文本数据,无论是在前端表单验证、数据处理还是后端逻辑中都能游刃有余。