JavaScript实现Footer语言列表格式化（符合and连接规则）

需求说明 #

需要实现网页Footer中编程语言数组的格式化展示，规则如下：

• 单个语言时直接显示，无逗号与and
• 两个语言时用and连接
• 三个及以上时，前序元素用逗号分隔，最后两个用and连接（无逗号）

原代码存在的问题 #

1. 数组元素自带多余的逗号、空格，导致格式混乱
2. 硬编码多个不同长度的数组，逻辑冗余，无法适配任意长度的数组
3. 条件判断逻辑错误，存在语法问题（比如多余分号、缩进错误）

优化实现方案 #

步骤1：清理数组元素

先把数组里的多余符号、空格去掉，保持元素干净：

// 清理后的数组，元素无多余符号
const langsUsed = ["HTML", "CSS", "JavaScript", "Python", "Java", "C++"];

步骤2：编写通用格式化函数

实现一个适配任意长度数组的格式化函数，完全符合需求规则：

function formatLanguages(langs) {
  const length = langs.length;
  if (length === 1) {
    return langs[0];
  } else if (length === 2) {
    return `${langs[0]} and ${langs[1]}`;
  } else {
    // 前n-1个元素用逗号分隔，最后拼接and和最后一个元素
    return `${langs.slice(0, length - 1).join(', ')} and ${langs[length - 1]}`;
  }
}

步骤3：渲染到页面

调用函数并将结果插入到Footer的目标元素中：

document.getElementById("thisWebs").textContent = `${formatLanguages(langsUsed)}.`;

函数逻辑说明 #

• 当数组长度为1时，直接返回唯一的元素
• 长度为2时，用and连接两个元素
• 长度≥3时，通过slice(0, length-1)获取除最后一个外的所有元素，用, 分隔后，再拼接and和最后一个元素，完美符合格式要求

内容的提问来源于stack exchange，提问作者asaf danan