JS截取字符串最后几个字符的简便写法

在 JavaScript 中，截取字符串末尾最后几个字符最简便、最直接的写法是使用原生方法 str.slice(-n)。这里的 -n 是一个负整数，代表从字符串末尾倒数第 n 个位置开始提取，一直截取到字符串的最后一位。例如 'JavaScript'.slice(-4) 会直接返回 'ript'。这种写法完全不需要手动读取 str.length 再进行相减，语法极其精简，执行效率高，且在所有现代及早期浏览器中均得到原生支持。

一、最简便写法：str.slice(-n) 的使用与效果

String.prototype.slice(beginIndex[, endIndex]) 是 JavaScript 操作字符串的核心方法之一。当只传入一个参数并且该参数为负数时，它具备天然的“从后向前定位”的特性：

const text = 'Hello World';

// 截取最后 5 个字符
const last5 = text.slice(-5);
console.log(last5); // 输出示例: "World"

// 截取最后 1 个字符
const lastChar = text.slice(-1);
console.log(lastChar); // 输出示例: "d"

相比于很多初学者习惯写的 text.slice(text.length - 5) 或者 text.substring(text.length - 5)，直接传入负数 -n 省略了中间的变量引用和加减计算。不仅键盘输入更少，代码语义也更加直观：负号直接表达了“从后往前数”的意图。

二、原理解析：负索引是如何在底层工作的？

要透彻掌握这种写法，需要理解 ECMAScript 规范中对 slice 负数参数的处理机制。当 slice 接收到负数起始索引时，引擎内部会自动执行如下转换：

以字符串 "JavaScript" 为例，其 length 为 10。正向索引从 0 到 9；若使用负向索引，则末尾最后一个字符 't' 对应 -1，倒数第四个字符 'r' 对应 -4。当执行 slice(-4) 时，底层计算为 10 + (-4) = 6，因此实际是从正向索引 6 截取到末尾，得到 "ript"。

这种机制还带来了极佳的边界容错性：如果传入的 n 大于字符串的实际长度，例如对长度为 5 的字符串执行 "hello".slice(-10)，公式计算为 5 + (-10) = -5，通过 Math.max(0, -5) 计算后收敛为 0。此时方法会从索引 0 开始提取全部内容并返回 "hello"，绝不会像某些强类型语言那样抛出“数组下标越界（IndexOutOfBounds）”的异常。

三、执行流程与安全判定

在实际编码中，虽然 str.slice(-n) 足够简明，但为了保证函数的高健壮性，通常还需要结合输入参数的有效性进行适当防御：

从执行流程中可以看到两个值得关注的细节：

1. 空值与非字符串保护：若变量可能为 null 或 undefined，直接调用 .slice() 会引发 TypeError。通常可在调用前使用可选链 str?.slice(-n) 或 String(str ?? '').slice(-n) 进行保护。
2. n 为 0 的特殊情况：由于在 JavaScript 规范中 -0 === 0，如果传入 slice(-0)，实际等同于执行 slice(0)，这会导致返回整个完整字符串，而不是空字符串。因此，如果 n 是由外部动态计算传入的变量，应当先确保 n > 0。

四、为什么不推荐其他截取写法？

JavaScript 历史上有多个截取字符串的方法，很多开发者容易将 slice、substring 和 substr 混淆。在截取末尾字符这一特定目标下，各方法的差异非常明显：

1. 为什么不选 substring？

String.prototype.substring(start, end) 不支持负数索引。如果给它传递负数，它会无条件将负数强制转换为 0。例如：

const str = 'abcdef';
console.log(str.substring(-2)); // 等价于 str.substring(0)，输出: "abcdef"

因此要用 substring 截取末尾字符，必须强制写成 str.substring(str.length - 2)。这不仅写法冗长，还额外增加了对变量名的重复引用。

2. 为什么坚决不推荐 substr？

尽管 str.substr(-n) 在部分现代浏览器中也支持负数起始位置，但 String.prototype.substr 已经被 ECMAScript 官方规范正式废弃（Deprecated），归入规范附录 Annex B（仅为向后兼容保留的遗留特性）。在 TypeScript、现代打包工具或严格模式下使用它，往往会引发代码质量警告，未来在新环境中存在被彻底弃用的风险，严禁在新项目中使用。

3. ES2022 的 str.at(-1) 的定位

在 ECMAScript 2022 (ES13) 中引入了 String.prototype.at(index) 方法。如果仅仅需要获取字符串的最后 1 个字符，str.at(-1) 同样非常直观简练。但它的定位是获取单字符，返回的是单个字符或 undefined；若需要截取最后 2 个或更多字符，依然必须依靠 slice(-n)。

五、高频实战场景与典型代码示例

场景 1：手机号与敏感凭据脱敏（保留末尾4位）

在展示手机号码或卡号时，常见的业务需求是仅展示末尾 4 位数字，前面其余部分使用星号遮蔽：

function maskPhoneNumber(phone) {
  const clean = String(phone ?? '').trim();
  if (clean.length <= 4) return clean;
  const tail = clean.slice(-4);
  return '*'.repeat(clean.length - 4) + tail;
}

// 示例调用
console.log(maskPhoneNumber('13812345678')); // 输出示例: "*******5678"
console.log(maskPhoneNumber('6222020212345678')); // 输出示例: "************5678"

场景 2：数字前置补零格式化

在处理日期、月份、编号排版时，常需要将数字补足指定位数（例如统一为 3 位或 4 位编号）。利用 slice(-n) 可以写出极富技巧性的简短代码：

function formatOrderNumber(num, totalDigits = 4) {
  // 先拼接足够长度的 0，再通过 slice(-totalDigits) 截取末尾目标位数
  return ('0'.repeat(totalDigits) + num).slice(-totalDigits);
}

// 示例调用
console.log(formatOrderNumber(7));   // 输出示例: "0007"
console.log(formatOrderNumber(42));  // 输出示例: "0042"
console.log(formatOrderNumber(128)); // 输出示例: "0128"

场景 3：简易文件扩展名识别

当只需要对固定后缀格式（如 .jpg, .png, .pdf）做快速校验时：

const filename = 'quarterly_report_2026.pdf';
const isPdf = filename.slice(-4).toLowerCase() === '.pdf';
console.log(isPdf); // 输出示例: true

六、边界情况与避坑提醒

const n = 0;
const str = "test";
console.log(str.slice(-n)); // 意外输出整个原串 "test"，而非期望的 ""

// 正确防御写法：
const safeTail = (n > 0) ? str.slice(-n) : '';

const emojiText = 'Hello 🍎';
console.log(emojiText.slice(-1)); // 输出乱码或损坏字符，因为苹果 emoji 占 2 个码元

// 兼容 Unicode 码点的通用写法（利用迭代器解构）：
const chars = Array.from(emojiText);
const lastEmoji = chars.slice(-1).join('');
console.log(lastEmoji); // 正确输出完整字符: "🍎"

七、知识架构与选型速查清单

为了便于日常编码记忆与团队代码审查，我们可以将末尾字符截取的最佳实践整理为如下全景清单：

总结而言，在日常 JavaScript 开发中，记住并使用 str.slice(-n) 是解决“截取字符串末尾几个字符”最高效、最专业且最符合现代规范的方式。