React应用中姓名首字母生成兼容Emoji的方案问询

DevOps 小满

2026-7-22

解决React姓名首字母生成兼容Emoji的问题

问题根源

你的代码用str[0]获取首字符，但很多Emoji是由多个Unicode码点组合而成的（比如带肤色修饰的👨🏿、家庭组合的👨‍👩‍👧），直接取单个码点会导致Emoji损坏显示为问号。

方案1：完整提取首字符（支持Emoji）

编写工具函数匹配完整的Emoji序列，正确提取首字符（无论是否为Emoji）：

// 获取字符串的第一个完整字符（支持Emoji）
const getFirstFullChar = (str) => {
  if (!str) return '';
  // 匹配单码点Emoji、带修饰/组合的Emoji序列
  const emojiRegex = /^\p{Emoji}(?:\p{Emoji_Modifier}|\p{Emoji_Component}|\p{Emoji_Join_Sequence})*/u;
  const match = str.match(emojiRegex);
  if (match) {
    return match[0];
  }
  // 非Emoji字符取首字母大写
  return str[0].toLocaleUpperCase();
};

修改原计算属性：

@computed public get initials() {
  const firstNameChar = this.firstName ? getFirstFullChar(this.firstName) : '';
  const lastNameChar = this.lastName ? getFirstFullChar(this.lastName) : '';
  return `${firstNameChar}${lastNameChar}`;
}

方案2：过滤Emoji，仅提取文字首字母

如果需求是只保留文字首字母，可先跳过开头的Emoji序列：

// 跳过开头的Emoji，提取第一个文字字符的大写形式
const getFirstLetterSkipEmoji = (str) => {
  if (!str) return '';
  const strippedStr = str.replace(/^\p{Emoji}(?:\p{Emoji_Modifier}|\p{Emoji_Component}|\p{Emoji_Join_Sequence})*/u, '');
  return strippedStr ? strippedStr[0].toLocaleUpperCase() : '';
};

修改原计算属性：

@computed public get initials() {
  const firstNameLetter = this.firstName ? getFirstLetterSkipEmoji(this.firstName) : '';
  const lastNameLetter = this.lastName ? getFirstLetterSkipEmoji(this.lastName) : '';
  return `${firstNameLetter}${lastNameLetter}`;
}