什么是localeCompare？

localeCompare() 是JavaScript字符串对象的内置方法，用于实现基于本地化规则的字符串比较。它不仅能进行基本的字母顺序比较，还能正确处理特定语言的排序规则（如德语变音符号、瑞典字母顺序等）。

方法特性

本地化感知：自动识别不同语言区域的排序规则
灵活配置：支持通过参数控制比较行为
兼容性：现代浏览器和Node.js环境广泛支持
扩展性：支持Unicode扩展字符集

返回值说明

负数：基准字符串排在比较字符串之前
0：两个字符串在排序顺序中相等
正数：基准字符串排在比较字符串之后

与简单比较运算符的区别：

// 简单比较（基于Unicode码点）
console.log('ä' > 'z');  // false（在德语中应为true）
 
// 本地化比较
console.log('ä'.localeCompare('z', 'de'));  // 1（正数表示ä在z之后）

语法

string.localeCompare(compareString[, locales[, options]])

配置选项详解

简单示例

const cities = ['上海', '北京', '台北', '香港'];
 
// 默认排序（拼音顺序）
cities.sort((a, b) => a.localeCompare(b));
console.log(cities); // ['北京', '上海', '台北', '香港']
 
// 英文比较
console.log('apple'.localeCompare('Banana'));
// -1（默认区分大小写）
console.log('apple'.localeCompare('Banana', 'en', {sensitivity: 'base'}));
// 1（忽略大小写）

数组排序

const products = [
  {name: '笔记本', price: 5999},
  {name: '鼠标', price: 299},
  {name: '显示器', price: 1299}
];
 
// 按中文名称排序
products.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'));

自然排序（含数字）

const files = ['file1', 'file10', 'file2'];
 
// 普通排序
files.sort(); // ['file1', 'file10', 'file2']
 
// 自然排序
files.sort((a, b) => a.localeCompare(b, 'en', {numeric: true}));
// ['file1', 'file2', 'file10']

3.3 相等性检测（谨慎使用）

function softEqual(str1, str2, locale) {
  return str1.localeCompare(str2, locale, {sensitivity: 'accent'}) === 0;
}
 
console.log(softEqual('café', 'cafe', 'fr'));  // false
console.log(softEqual('café', 'cafe', 'fr', {ignorePunctuation: true}));  // true

语言区域定制

// 德语电话簿排序
console.log('ä'.localeCompare('a', 'de'));         // 1
console.log('ä'.localeCompare('a', 'de-DE-phonebook'));  // -1
 
// 中文拼音排序比较
const words = ['王', '李', '张', '刘'];
words.sort((a, b) => a.localeCompare(b, 'zh-CN'));
// ['李', '刘', '王', '张']

示例组合使用：

const names = ['Ängel', 'apple', 'Ångström'];
 
// 案例1：基本比较
names.sort((a, b) => a.localeCompare(b, 'sv'));
// ['apple', 'Ångström', 'Ängel']
 
// 案例2：忽略音调差异
names.sort((a, b) => a.localeCompare(b, 'sv', {sensitivity: 'base'}));
// ['Ångström', 'Ängel', 'apple']
 
// 案例3：大小写优先
names.sort((a, b) => a.localeCompare(b, 'en', {caseFirst: 'upper'}));
// ['Ångström', 'Ängel', 'apple']

特殊字符处理

const symbols = ['#apple', 'apple', '1apple'];
 
// 忽略标点符号
console.log('#apple'.localeCompare('apple', 'en', {ignorePunctuation: true}));  // 0
 
// 带数字排序
const versions = ['v1.2', 'v1.10', 'v1.1'];
versions.sort((a, b) => a.localeCompare(b, 'en', {numeric: true}));
// ['v1.1', 'v1.2', 'v1.10']

多语言表格排序

function sortTable(columnIndex, locale) {
  const table = document.getElementById('data-table');
  const rows = [...table.rows].slice(1);
  
  rows.sort((a, b) => {
    const aVal = a.cells[columnIndex].textContent;
    const bVal = b.cells[columnIndex].textContent;
    return aVal.localeCompare(bVal, locale, {numeric: true});
  });
 
  rows.forEach(row => table.tBodies[0].appendChild(row));
}

智能搜索建议排序

function sortSuggestions(input, suggestions, locale) {
  return suggestions.sort((a, b) => {
    // 优先匹配前缀
    const aPrefix = a.toLowerCase().startsWith(input.toLowerCase());
    const bPrefix = b.toLowerCase().startsWith(input.toLowerCase());
    
    if(aPrefix && !bPrefix) return -1;
    if(!aPrefix && bPrefix) return 1;
    
    // 其次按相关性排序
    return a.localeCompare(b, locale, {
      sensitivity: 'base',
      ignorePunctuation: true
    });
  });
}

注意事项

• 性能考虑：大数据量排序时建议使用Intl.Collator

// 创建Collator实例提升性能
const collator = new Intl.Collator('de', {numeric: true});
bigArray.sort(collator.compare);

• 浏览器兼容性
  1.全功能支持：Chrome 24+, Firefox 29+, Edge 12+
  2.部分支持：Safari 10+（某些选项需要11+）
  3.Node.js：4.0+（需full-icu支持）
• 区域数据差异

// 不同系统的中文排序可能不同
'重庆'.localeCompare('北京', 'zh-CN');  // 结果可能因系统而异

• 异常处理

try {
  'abc'.localeCompare('def', 'invalid-locale');
} catch (e) {
  console.error('无效的区域设置:', e.message);
}

练习

假设在一个数组中有n条，根据state中的值进行排序，state中有字母、数字、文本，且顺序杂乱，如何按照字母、数字、文本的顺序显示?

总结

localeCompare为处理国际化字符串比较提供了强大支持，通过灵活的参数配置可以满足

• 多语言环境下的正确排序
• 复杂字符的智能处理
• 数字与文本的混合排序
• 用户自定义的排序需求

掌握该方法的关键点

• 理解sensitivity不同级别的差异
• 合理选择语言区域代码
• 大数据场景使用Collator优化
• 注意不同平台的实现差异