JS字符串切片详解|极客笔记

JS字符串切片详解

在JavaScript中，我们经常需要操作字符串，其中字符串的切片也是一项常见的操作。字符串切片可以通过获取字符串中的特定部分来实现，从而方便我们对字符串进行进一步处理。本文将详细介绍JavaScript中字符串切片的方法和应用。

字符串切片的基本概念

字符串切片是指从一个字符串中获取其中的一部分子串。在JavaScript中，我们可以使用字符串的substring()和slice()方法来实现字符串切片操作。

`substring()`方法

substring(start, end)方法用于从start位置开始截取字符串，直到end位置（不包括end位置），并返回截取的子串。如果省略end参数，则默认截取到字符串末尾。如果start大于end，substring()会自动调换这两个参数。示例代码如下：

let str = "Hello, World!";
let slicedStr = str.substring(7, 12);
console.log(slicedStr); // 输出 "World"

let reversedStr = str.substring(12, 7);
console.log(reversedStr); // 输出 "World"

`slice()`方法

slice(start, end)方法与substring()类似，也是用于截取字符串的子串。不同之处在于，当start为负数时，slice()会从字符串末尾开始计算位置。如果省略end参数，则默认截取到字符串末尾。示例代码如下：

let str = "Hello, World!";
let slicedStr = str.slice(7, 12);
console.log(slicedStr); // 输出 "World"

let reversedStr = str.slice(-6, -1);
console.log(reversedStr); // 输出 "World"

字符串切片的常见应用

字符串切片在实际开发中有许多应用场景，下面介绍一些常见的应用示例。

截取文件名后缀

假设我们有一组文件名，需要提取文件后缀名（即文件名中最后一个.后面的部分），可以使用字符串切片来实现。示例代码如下：

function getSuffix(fileName) {
  let dotIndex = fileName.lastIndexOf('.');
  if (dotIndex === -1) {
    return ""; // 没有后缀名
  } else {
    return fileName.slice(dotIndex + 1);
  }
}

console.log(getSuffix("example.txt")); // 输出 "txt"
console.log(getSuffix("index.html")); // 输出 "html"
console.log(getSuffix("image.jpeg")); // 输出 "jpeg"

提取URL中的参数

在Web开发中，经常需要从URL中提取参数。假设我们有一个包含参数的URL，需要提取其中的参数部分，可以使用字符串切片来实现。示例代码如下：

function getParameter(url, key) {
  let startIndex = url.indexOf(key + "=");
  if (startIndex === -1) {
    return ""; // 参数不存在
  }
  let endIndex = url.indexOf("&", startIndex);
  if (endIndex === -1) {
    return url.slice(startIndex + key.length + 1);
  } else {
    return url.slice(startIndex + key.length + 1, endIndex);
  }
}

let url = "https://www.example.com?name=Alice&age=30";
console.log(getParameter(url, "name")); // 输出 "Alice"
console.log(getParameter(url, "age"));  // 输出 "30"

截取手机号中间四位

在一些业务场景中，需要对手机号进行脱敏处理，只展示中间四位数字。可以使用字符串切片来实现。示例代码如下：

function hidePhoneNumber(phoneNumber) {
  return phoneNumber.slice(0, 3) + "****" + phoneNumber.slice(-4);
}

console.log(hidePhoneNumber("13812345678")); // 输出 "138****5678"
console.log(hidePhoneNumber("13987654321")); // 输出 "139****4321"