按单词截断字符串并追加未显示项计数的实现需求

需求说明 #

现有用户语言数组的几种场景，需要按以下规则处理标签拼接：

• 多个语言标签用逗号分隔拼接
• 拼接后总长度不超过15时，直接展示全部标签
• 总长度超过15时：
  • 若能展示部分标签 + +剩余数量且总长度不超15，就按此格式展示（比如第二个用户展示English, French, +2，第三个用户展示Farsi, Dutch, +3）
  • 要是单个标签本身就超过15长度，就截断该标签并在末尾加...（比如第四个用户的Arabic (Egyp...)）
  • 截断时如果加入下一个标签会导致总长度超15，就不包含这个标签，直接追加剩余语言的计数

场景示例与预期输出 #

• 第一个用户（2个短标签）：
  输入数组：

  [{"id": 1, "label": "English"}, {"id": 2, "label": "French"}]
  

  预期输出：English, French

• 第二个用户（4个短标签）：
  输入数组：

  [{"id": 1, "label": "English"}, {"id": 2, "label": "French"}, {"id": 3, "label": "German"}, {"id": 4, "label": "Turkish"}]
  

  预期输出：English, French, +2

• 第三个用户（5个短标签）：
  输入数组：

  [{"id": 1, "label": "Farsi"}, {"id": 2, "label": "Dutch"}, {"id": 3, "label": "German"}, {"id": 4, "label": "Turkish"}, {"id": 5, "label": "English"}]
  

  预期输出：Farsi, Dutch, +3

• 第四个用户（单个长标签）：
  输入数组：

  [{"id": 1, "label": "Arabic (Egyptian Spoken)"}]
  

  预期输出：Arabic (Egyp...)

问题代码 #

当前代码仅做简单拼接，无法满足截断和计数需求：

const languageLabels = props?.languages?
  .map(({label}) => label)
  .join(", ")
  .toString()

解决方案代码 #

以下是实现需求的JavaScript代码，逻辑已嵌入注释：

const formatLanguageLabels = (languages) => {
  if (!languages || languages.length === 0) return '';

  const MAX_LENGTH = 15;
  const labels = languages.map(({ label }) => label);

  // 处理单个标签的边缘场景
  if (labels.length === 1) {
    const singleLabel = labels[0];
    return singleLabel.length > MAX_LENGTH 
      ? `${singleLabel.slice(0, MAX_LENGTH - 3)}...` 
      : singleLabel;
  }

  // 处理多标签场景，逐步拼接直到接近最大长度
  let result = '';
  let remainingCount = 0;

  for (let i = 0; i < labels.length; i++) {
    const currentLabel = labels[i];
    // 生成临时拼接结果（第一个标签直接用，后续加逗号空格）
    const temp = result ? `${result}, ${currentLabel}` : currentLabel;
    
    // 计算带剩余数量的临时结果长度
    const remaining = labels.length - i - 1;
    const tempWithCount = remaining > 0 ? `${temp}, +${remaining}` : temp;

    if (tempWithCount.length <= MAX_LENGTH) {
      result = temp;
    } else {
      // 若当前标签加入后带计数超长度，停止拼接，计算剩余数量
      remainingCount = labels.length - i;
      break;
    }
  }

  // 有剩余数量就拼接计数，否则直接返回结果
  return remainingCount > 0 ? `${result}, +${remainingCount}` : result;
};

// 使用方式
const languageLabels = formatLanguageLabels(props?.languages);

逻辑验证 #

• 第一个用户：拼接结果长度13，小于15，直接返回完整标签
• 第二个用户：English, French, +2总长度14，符合要求
• 第三个用户：Farsi, Dutch, +3总长度13，符合要求；若加入German再带计数会超15，因此停止在两个标签
• 第四个用户：单个标签过长，截断到12位（留3位给...），返回截断结果

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