如何编写JavaScript函数转换Font Awesome图标名数组格式？

当然可以搞定这个需求！刚好这是前端开发里挺常见的字符串转换场景，咱们来写一个简洁的JavaScript函数实现它。

实现思路 #

咱们的目标是把每个图标名按以下规则转换：

• 前缀加上fa
• 移除所有连字符，将每个拆分后的单词首字母大写（形成驼峰命名）

完整代码实现 #

function transformIconNames(iconNames) {
  return iconNames.map(iconName => {
    // 按连字符拆分图标名称为单词数组
    const wordArray = iconName.split('-');
    // 将每个单词首字母大写，其余保持原样，再拼接成驼峰字符串
    const camelCasePart = wordArray.map(word => 
      word.charAt(0).toUpperCase() + word.slice(1)
    ).join('');
    // 拼接fa前缀和驼峰部分，得到最终结果
    return `fa${camelCasePart}`;
  });
}

// 测试用例
const originalIcons = ["address-book","copyright","arrow-alt-circle-down"];
const transformedIcons = transformIconNames(originalIcons);
console.log(transformedIcons);
// 输出结果: ["faAddressBook","faCopyright","faArrowAltCircleDown"]

额外优化：兼容非小写输入 #

如果你的图标名称可能存在大写字母（比如用户输入了Address-Book），可以先把整个字符串转成小写，避免转换异常：

function transformIconNames(iconNames) {
  return iconNames.map(iconName => {
    // 先转全小写，再拆分
    const wordArray = iconName.toLowerCase().split('-');
    const camelCasePart = wordArray.map(word => 
      word.charAt(0).toUpperCase() + word.slice(1)
    ).join('');
    return `fa${camelCasePart}`;
  });
}

逻辑拆解 #

• 使用Array.map()遍历原始数组，对每个元素单独处理
• split('-')把带连字符的字符串拆分成单词数组，比如"address-book"变成["address", "book"]
• map()遍历单词数组，将每个单词的首字母转大写，再拼接剩余字符
• 最后把fa前缀和处理好的驼峰字符串拼接，得到目标格式

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