JavaScript自定义排序：将特殊字符和数字置于字符串末尾

1. localeCompare的默认行为及其局限性

在JavaScript中，Array.prototype.sort() 方法结合 String.prototype.localeCompare() 是进行字符串排序的常用方式。然而，localeCompare 默认的排序规则是基于Unicode字符的编码顺序，这意味着数字和许多特殊字符的Unicode值通常小于英文字母，导致它们在排序时会排在字母字符之前。

例如，对于以下字符串数组：

const items = ['zdx', '9or', 'abc', 'a=c'];
items.sort((a, b) => a.localeCompare(b));
console.log(items);
// 默认输出: ["9or", "a=c", "abc", "zdx"]

可以看到，9or 和 a=c (其中 = 是特殊字符) 被排在了 abc 和 zdx 之前，这与我们期望的“字母在前，数字和特殊字符在后”的排序结果不符。

2. 初次尝试与常见误区

为了解决上述问题，一种直观的思路是在比较之前对字符串进行预处理，将所有非字母字符替换为某种“大”字符，使其在排序时自然地排到后面。

立即学习“Java免费学习笔记（深入）”；

尝试一：替换为高于 'z' 的字符

最初的尝试可能是将所有非字母字符替换为 'z' 之后的一个字符，例如 String.fromCharCode('z'.charCodeAt(0) + 1)。

const items = ['zdx', '9or', 'abc', 'a=c'];
const last = String.fromCharCode('z'.charCodeAt(0) + 1); // 例如 '{'
items.sort((a, b) => a.replace(/[^a-z]/g, last).localeCompare(b.replace(/[^a-z]/g, last)));
console.log(items);
// 预期输出: ["abc", "a=c", "zdx", "9or"] (这里 a=c 变成了 a{c，9or 变成了 {or)

这种方法在一定程度上是有效的，但需要确保替换的字符足够“大”，并且不会与原始字符串中的有效字母字符冲突，导致意外的排序结果。

尝试二：替换为 'z'

另一种尝试是直接将非字母字符替换为 'z'。

const items = ['zdx', '9or', 'abc', 'a=c', '9ac', 'zac'];
const last = 'z';
items.sort((a, b) => a.replace(/[^a-z]/g, last).localeCompare(b.replace(/[^a-z]/g, last)));
console.log(items);
// 实际输出可能为: ["abc", "zac", "zdx", "z=c", "zzz", "zzz"] (因为 9ac 变为 zac, a=c 变为 azc)

这种方法存在一个明显的问题：如果原始字符串中包含 'z'，或者替换后的字符串形成了新的合法字母序列，排序结果会出错。例如，'9ac' 替换后变为 'zac'，而 'zac' 在字母排序中可能比 'zdx' 靠前，但我们希望 '9ac' (处理后为非字母类) 排在最后。这说明简单地替换为 'z' 会破坏原始字母部分的相对顺序，或者导致非字母部分无法正确地被推到末尾。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

3. 有效的解决方案：高位Unicode字符替换

为了确保被替换的字符在任何情况下都能被排到所有常规字母字符之后，我们需要选择一个Unicode编码值极高的字符。JavaScript的字符串比较是基于UTF-16编码单元值的，因此我们可以利用这一点。

一个非常合适的选择是 Unicode 字符 U+FFFF，它代表了基本多语言平面（BMP）中的最高编码点。通过 String.fromCharCode(0xFFFF) 可以得到这个字符。

核心思路：

1. 定义一个正则表达式 /[^a-z]/g 来匹配所有非小写字母字符（可以根据需求扩展为 [^a-zA-Z0-9] 等）。
2. 将匹配到的非字母字符替换为 String.fromCharCode(0xFFFF)。
3. 对替换后的字符串进行 localeCompare 比较。

4. 实现步骤与代码示例

以下是使用 String.fromCharCode(0xFFFF) 解决自定义排序问题的完整代码示例：

const items = ['zdx', '9or', 'abc', 'a=c', '9ac', 'zac'];

// 定义一个极高的Unicode字符，确保它在排序时位于所有常规字符之后
const lastChar = String.fromCharCode(0xFFFF); // U+FFFF 是基本多语言平面中的最高编码点

items.sort((a, b) => {
    // 预处理字符串：将所有非小写字母字符替换为 lastChar
    const processedA = a.replace(/[^a-z]/g, lastChar);
    const processedB = b.replace(/[^a-z]/g, lastChar);

    // 使用 localeCompare 进行比较
    return processedA.localeCompare(processedB);
});

console.log(items);

运行结果：

[
  "abc",
  "a=c",
  "zac",
  "zdx",
  "9ac",
  "9or"
]

结果分析：

• abc 和 zac 依然按照字母顺序排在最前面。
• a=c 在处理后变为 a\uFFFFc，但由于 localeCompare 会逐个字符比较，a 相同，然后比较 \uFFFF 和 b (来自 abc)，\uFFFF 远大于 b，所以 a=c (原始值) 会在 abc 之后。这里 a=c 排序在 abc 之后是符合预期的，因为它包含非字母字符。
• 9ac (处理后为 \uFFFFac) 和 9or (处理后为 \uFFFFor) 都被推到了列表的末尾，并且它们之间也按照处理后的字符串进行排序。

5. 原理分析

String.prototype.localeCompare() 在内部会根据语言环境和Unicode排序算法进行比较。然而，当两个字符串经过预处理，将所有非目标字符（如数字、特殊符号）替换为同一个高位Unicode字符时，这些高位字符的Unicode值会远大于常规的字母字符。

例如，在UTF-16编码中，英文字母 'a' 到 'z' 的编码范围是 U+0061 到 U+007A。而 U+FFFF 远超这个范围。因此，任何包含 U+FFFF 的字符串片段在比较时，只要遇到 U+FFFF，就会被认为大于相应的字母字符，从而确保包含这些特殊字符的原始字符串被推到排序列表的末尾。

6. 注意事项

• 正则表达式的范围： 示例中使用了 /[^a-z]/g 来匹配所有非小写字母。如果需要将大写字母、数字也视为“常规字符”，则应调整正则表达式，例如 /[^a-zA-Z0-9]/g。
• 性能考量： 对于非常大的数据集，每次比较都进行字符串替换可能会带来一定的性能开销。如果性能是关键因素，可以考虑在排序前一次性生成一个包含预处理字符串的临时数组，或者实现一个更复杂的自定义比较函数。
• Unicode平面： U+FFFF 属于基本多语言平面（BMP）。对于包含辅助平面字符（如某些表情符号）的场景，可能需要选择更高的Unicode字符，或者采用更复杂的Unicode排序算法。然而，对于大多数常见场景，U+FFFF 已足够。

7. 总结

通过在 localeCompare 之前对字符串进行预处理，将非目标字符替换为一个极高Unicode值的字符（如 U+FFFF），我们能够有效地实现自定义排序，将数字和特殊字符始终置于字母字符之后。这种方法灵活且易于实现，为JavaScript中的复杂字符串排序提供了强大的解决方案。

以上就是JavaScript自定义排序：将特殊字符和数字置于字符串末尾的详细内容，更多请关注php中文网其它相关文章！