当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript中格式化字符串：排序，复数和列表

JavaScript中格式化字符串：排序，复数和列表

2025-02-10 09:34:11 0浏览收藏

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JavaScript中格式化字符串：排序，复数和列表》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

您是否曾尝试对不同语言的单词进行排序、处理复杂的复数规则或以自然的方式格式化列表？Intl API提供了一些强大的功能，尤其是在处理字符串和列表方面。

简述

我们将重点介绍三个强大且常被忽视的功能：

Intl.Collator：正确排序和比较字符串，支持多种语言。
Intl.PluralRules：处理多种语言的复数形式。
Intl.ListFormat：以自然的方式格式化列表，适应不同语言的习惯。

Intl.Collator

字符串排序并非易事。不同的语言对字母顺序、大小写敏感性和变音符号有不同的规则。Intl.Collator应运而生！

基本排序

const collator = new Intl.Collator("en", { sensitivity: "base" });

console.log(collator.compare("apple", "banana")); // -1 (apple 在 banana 之前)
console.log(collator.compare("banana", "apple")); // 1 (banana 在 apple 之后)
console.log(collator.compare("apple", "apple")); // 0 (两者相等)

{sensitivity: 'base'} 使比较不区分大小写，因此 "apple" 和 "Apple" 被视为相同。

使用 Intl.Collator 对数组排序

const fruits = ["grape", "banana", "apple", "mango"];
fruits.sort(new Intl.Collator("en").compare);
console.log(fruits); // ['apple', 'banana', 'grape', 'mango']

将 collator.compare 传递给 .sort() 确保基于语言环境的正确排序。

String.localeCompare vs Intl.Collator

两者都可以用于排序，但有一些关键区别：

Intl.Collator 默认支持本地化，而 localeCompare 使用系统或默认的语言环境设置。
localeCompare 使用起来可能更直接，例如："apple".localeCompare('banana')。
Intl.Collator 通常更快。
Intl.Collator 支持多种语言的排序。

选项

localeMatcher：比较字符串时使用的算法，"best fit"（默认）或 "lookup"，控制语言环境的选择。
sensitivity：比较时考虑的因素，"base"、"accent"、"case"、"variant"（最严格）。
ignorePunctuation：true 时忽略标点符号。

Intl.PluralRules：智能复数化

正确处理复数比简单地添加 "s" 更复杂。不同的语言有复杂的单数、双数、少数和复数规则。Intl.PluralRules 帮助我们动态确定正确的复数形式。

基本用法

const pluralrules = new Intl.PluralRules("en");

console.log(pluralrules.select(1)); // "one"
console.log(pluralrules.select(2)); // "other"
console.log(pluralrules.select(0)); // "other"

对于英语，"one" 用于 1，"other" 用于其他所有数字。

不同的语言，不同的规则

例如，法语将 0 视为单数，而英语将其视为复数。

const pluralrulesfr = new Intl.PluralRules("fr");

console.log(pluralrulesfr.select(1)); // "one"
console.log(pluralrulesfr.select(0)); // "one" (法语将 0 视为单数)
console.log(pluralrulesfr.select(2)); // "other"

动态生成复数消息

function getItemMessage(count) {
  const pluralrule = new Intl.PluralRules("en").select(count);
  const messages = {
    one: `您有 ${count} 条消息。`,
    other: `您有 ${count} 条消息。`,
  };
  return messages[pluralrule];
}

console.log(getItemMessage(1)); // "您有 1 条消息。"
console.log(getItemMessage(3)); // "您有 3 条消息。"

此技术允许您的应用程序自动使用正确的复数形式。

选项

type：'cardinal'（默认）用于计数对象，'ordinal' 用于序数（第一、第二等）。
localeMatcher：'best fit' 或 'lookup'，控制语言环境的选择。

Intl.ListFormat：自然格式化列表

编写项目列表（例如，“苹果、香蕉和橙子”）在不同语言中有所不同。有些语言使用逗号，有些使用 "和" 或 "et"，有些根本不使用连词。Intl.ListFormat 使正确格式化列表变得容易！

基本用法

const listformatter = new Intl.ListFormat("en", {
  style: "long",
  type: "conjunction",
});

console.log(listformatter.format(["apple", "banana", "cherry"]));
// "apple, banana, and cherry"

它会自动在正确的位置添加 "and"！

不同的语言环境和样式

const listFormatterFr = new Intl.ListFormat("fr", {
  style: "long",
  type: "conjunction",
});

console.log(listFormatterFr.format(["pomme", "banane", "cerise"]));
// "pomme, banane et cerise" (法语使用 "et" 代替 "and")

const shortFormatter = new Intl.ListFormat("en", {
  style: "short",
  type: "disjunction",
});

console.log(shortFormatter.format(["tea", "coffee", "milk"]));
// "tea, coffee, or milk" (disjunction 使用 "or" 代替 "and")

选项