JS处理姓名格式转换时如何删除输出末尾多余的/分隔符

问题原因 #

你当前的实现是每处理完一行姓名就直接拼接/分隔符，不管是不是最后一个姓名，所以最终输出末尾一定会多出多余的分隔符。

解决思路 #

先将所有格式化完成的姓名存入临时数组，遍历结束后统一调用数组的join方法拼接所有内容，join方法只会在两个元素之间插入指定分隔符，不会在首尾额外添加，从根源避免多余分隔符问题。

修改后完整代码 #

JS逻辑代码 #

splitName.onclick = function() {
  const resultDom = document.getElementById("result");
  const fullNameDom = document.getElementById("fullName");
  resultDom.innerHTML = '';
  // 存储所有格式化后的姓名
  const formattedNames = [];
  // 按换行拆分输入内容
  const nameLines = fullNameDom.value.split('\n');

  nameLines.forEach(fullname => {
    // 跳过空行
    if (!fullname.trim()) return;
    const spaceIndex = fullname.indexOf(" ");
    let firstname, lastname;

    if (spaceIndex === -1) {
      // 修正原代码逻辑错误：无空格时直接将整行作为姓
      lastname = fullname;
      firstname = "";
    } else {
      firstname = fullname.substring(0, spaceIndex);
      lastname = fullname.substr(spaceIndex + 1);
    }

    const nameItem = [lastname, firstname?.[0]].filter(Boolean).join(", ");
    formattedNames.push(nameItem);
  });

  // 统一拼接，分隔符自动只出现在元素之间
  resultDom.innerHTML = formattedNames.join(' / ');
};

HTML代码（保持原有逻辑不变即可） #

<div>
  <textarea cols="50" rows="5" id="fullName" class=""></textarea>
</div>
<button id="splitName">Click me</button>
<div>
  <br>
</div>
<div class="border" id="result"></div>

额外优化说明 #

• 新增空行过滤逻辑，输入内容里的空行不会被处理成无效的空内容
• 修正原代码中姓名无空格时lastname被错误清空的逻辑问题
• 新增可选链操作符firstname?.[0]避免firstname为空时取值报错

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