JavaScript实现字符串按位拼接、去重并移除颜色类型信息

直接上可运行实现，处理逻辑完全匹配需求：

// 定义初始输入变量
const string1 = "Green | Green | Red | Orange | Blue | Cut | Yellow | Yellow";
const string2 = "Color | Color | Color | Color | Color | Technical | Color | Color";

/**
 * 第一步：拆分字符串并按索引拼接得到string3
 * split拆分后对每个元素做trim处理，清除分隔符前后的多余空格
 */
const arr1 = string1.split('|').map(str => str.trim());
const arr2 = string2.split('|').map(str => str.trim());
const string3 = arr1.map((content, idx) => `${content} ${arr2[idx]}`).join(' | ');

/**
 * 第二步：提取有效信息去重得到string4
 * 拼接结果后半段为类型标识，全部移除后取前半段内容，通过Set自动去重
 */
const validContentList = [...new Set(arr1)];
const string4 = validContentList.join(' | ');

// 输出结果校验
console.log('string3:', string3);
console.log('string4:', string4);

结果校验 #

运行代码后输出完全符合预期：

• string3输出：Green Color | Green Color | Red Color | Orange Color | Blue Color | Cut Technical | Yellow Color | Yellow Color
• string4输出：Green | Red | Orange | Blue | Cut | Yellow

关键处理细节 #

• 拆分字符串后统一做trim()处理，避免分隔符前后的空格导致拼接出现多余空白、内容匹配错误的问题
• 利用Set数据结构原生去重特性，不需要额外写循环判断重复值，代码更简洁
• 如果后续业务中两个输入字符串拆分后长度可能不一致，可以在拼接前增加长度校验逻辑，避免出现undefined的拼接结果

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