JS数组转字符串的实用方法

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JS本地化数组转字符串方法》，聊聊，希望可以帮助到正在努力赚钱的你。

JavaScript中，toLocaleString方法不能直接本地化纯字符串数组，它仅对数组中的数字、日期等支持本地化格式化的数据类型生效，而对普通字符串无效；1. 当数组包含数字或日期时，toLocaleString会调用各元素自身的toLocaleString方法，按指定语言环境格式化并用本地化分隔符连接；2. 对于纯字符串数组，由于String.prototype.toLocaleString与toString行为一致，结果仅为逗号分隔的字符串，无实际本地化效果；3. 若字符串表示数字或日期，需先通过parseFloat或new Date解析为对应类型再格式化；4. 对于需翻译的文本内容，应使用i18n库如i18next，通过多语言映射表实现真正的本地化显示。

JavaScript中，toLocaleString方法本身并不能直接“本地化”一个数组字符串。它主要用于数字、日期等数据类型的本地化显示。当你在一个数组上调用toLocaleString()时，它会遍历数组的每个元素，并对每个元素调用其自身的toLocaleString()方法，然后将这些本地化后的字符串用一个特定于当前或指定语言环境的分隔符连接起来。所以，真正的本地化是发生在数组的元素层面，而不是数组本身作为一个整体的字符串。

说实话，当我第一次接触到 toLocaleString 这个方法时，也曾误以为它能像魔法一样，把任何东西都变得“本地化”。但随着深入，我才明白它其实是针对特定数据类型的格式化工具。对于数组，Array.prototype.toLocaleString() 的行为是这样的：它会迭代数组中的每一个元素，然后尝试对每个元素调用其自身的 toLocaleString() 方法。最后，它会把这些经过各自 toLocaleString() 处理后的元素字符串，用一个基于当前或指定语言环境的默认分隔符（比如逗号，但不同地区可能不同）连接起来，形成一个最终的字符串。

举个例子，如果你的数组里有数字和日期对象，你会看到 toLocaleString 的真正威力：

const mixedData = [12345.67, new Date(), 'hello world'];

// 假设当前环境是 'en-US'
console.log(mixedData.toLocaleString('en-US'));
// 可能会输出类似: "12,345.67,10/26/2023, 1:23:45 PM,hello world" (日期和时间会根据当前时间变化)

// 假设当前环境是 'de-DE'
console.log(mixedData.toLocaleString('de-DE'));
// 可能会输出类似: "12.345,67,26.10.2023, 13:23:45,hello world"

你看，数字和日期都根据不同的语言环境进行了格式化。但那个 'hello world' 字符串呢？它似乎没怎么变。这正是问题的关键。String.prototype.toLocaleString() 多数情况下表现得和 String.prototype.toString() 没什么两样，除非你是在非常特定的上下文中使用它（比如结合 Intl.DisplayNames 这种更高级的 Intl API）。

所以，如果你想“本地化数组字符串”，你需要搞清楚你到底想本地化的是什么：是数组中作为数字或日期表示的字符串？还是纯粹的文本内容？不同的场景有不同的处理方式。

为什么直接对字符串数组使用 toLocaleString 效果不明显？

这大概是我在初学 JavaScript 时最容易混淆的地方之一。我们都知道 Number.prototype.toLocaleString() 能把数字格式化成带千位分隔符、小数点符合当地习惯的字符串，Date.prototype.toLocaleString() 也能把日期时间变得非常友好。那么，String.prototype.toLocaleString() 呢？

答案可能有点让人失望：在绝大多数情况下，String.prototype.toLocaleString() 的行为和 String.prototype.toString() 几乎一模一样。它不会帮你翻译字符串，也不会帮你根据语言环境调整字符串的排序规则（那需要 String.prototype.localeCompare()）。它就是简单地返回字符串本身。

const myString = 'Hello World';
console.log(myString.toLocaleString('en-US')); // 输出: "Hello World"
console.log(myString.toLocaleString('zh-CN')); // 输出: "Hello World"

所以，当你有一个全是普通字符串的数组，比如 ['apple', 'banana', 'orange']，然后你对它调用 toLocaleString() 时，数组会遍历这些字符串，对每个字符串调用其 toLocaleString() 方法。由于每个字符串的 toLocaleString() 只是返回自身，最终你得到的结果只是这些字符串用逗号（或其他本地分隔符）连接起来，看起来和 join(',') 差不多，根本没有发生你期望的“本地化”翻译或者格式调整。

这其实揭示了一个核心概念：toLocaleString 系列方法是关于数据类型的本地化格式化，而不是关于文本内容的翻译。如果你想翻译文本，那属于国际化（i18n）的另一个范畴。

如何本地化数组中包含数字或日期的字符串表示？

有时候，我们从后端或者某个数据源拿到的数据，可能把数字或者日期以字符串的形式传过来。比如 ['12345.67', '2023-10-26T13:30:00Z']。你直接对这样的字符串调用 toLocaleString()，它当然不会按照数字或日期的规则去格式化。因为对 JavaScript 来说，它们就是纯粹的字符串。

要解决这个问题，你需要先做一步“类型转换”或者说“解析”。你需要把这些字符串解析回它们原本的数据类型——数字或日期对象，然后再应用 toLocaleString 或更专业的 Intl 对象进行格式化。

const stringNumbersAndDates = ['12345.67', '2023-10-26T13:30:00Z', '9876.54'];

// 假设我们想把它们都格式化成德语环境
const formattedArray = stringNumbersAndDates.map(item => {
    // 尝试解析为数字
    const num = parseFloat(item);
    if (!isNaN(num)) {
        return num.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    // 尝试解析为日期
    try {
        const date = new Date(item);
        // 检查日期是否有效，避免无效日期被格式化
        if (!isNaN(date.getTime())) {
            return date.toLocaleString('de-DE', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }
    } catch (e) {
        // 如果解析失败，可能是普通字符串，或者格式不对
    }

    // 如果都不是数字或日期，就原样返回或者进行其他处理
    return item;
});

console.log(formattedArray.join(', '));
// 示例输出: "12.345,67,26.10.2023, 13:30,9.876,54"

这个思路是，先识别并转换数据类型。这其实是一个很常见的编程模式，数据进来的时候可能是“扁平化”的字符串，但你需要它以“结构化”的数据类型来处理，才能发挥出像 toLocaleString 这种工具的真正作用。

如何本地化数组中的任意文本内容（非数字/日期）？

如果你的数组里装的是像 ['pending', 'approved', 'rejected'] 这样的状态字符串，或者 ['USD', 'EUR', 'GBP'] 这样的货币代码，又或者是 ['en-US', 'zh-CN', 'fr-FR'] 这样的语言代码，你想要把它们显示成用户能看懂的“待处理”、“已批准”、“美元”、“欧元”等，那么 toLocaleString 就真的帮不上忙了。

这种情况下，你需要的是真正的“翻译”或者“显示名称”本地化。

1. 使用国际化（i18n）库： 这是最常见、最推荐的做法。市面上有很多成熟的 i18n 库，比如 i18next、react-intl（如果你用 React）、vue-i18n（如果你用 Vue）。它们的核心思想都是通过一个键值对的映射表（通常是 JSON 文件）来管理不同语言的翻译文本。

   例如，你会有这样的翻译文件：

   // en.json
   {
     "status.pending": "Pending",
     "status.approved": "Approved",
     "status.rejected": "Rejected",
     "currency.USD": "US Dollar",
     "currency.EUR": "Euro"
   }
   
   // zh.json
   {
     "status.pending": "待处理",
     "status.approved": "已批准",
     "status.rejected": "已拒绝",
     "currency.USD": "美元",
     "currency.EUR": "欧元"
   }

   然后你的代码会这样用：

   // 假设你有一个 i18n 实例，并设置了当前语言为 'zh'
   const i18n = {
       t: (key) => { /* 实际的翻译查找逻辑，这里只是个示意

今天关于《JS数组转字符串的实用方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！