3

In my React application there's the following function which generates the user initials from the first name/last name like so:

@computed public get initials() {
  const firstNameLetter = this.firstName
    ? this.firstName[0].toLocaleUpperCase()
    : '';
  const lastNameLetter = this.lastName
    ? this.lastName[0].toLocaleUpperCase()
    : '';

  return `${firstNameLetter}${lastNameLetter}`;
}

This works fine. But if the first name or the last name starts with an emoji, this code is basically breaking that emoji and what is displayed is just a question mark. The problem is with taking the first char which is not enough if it's an emoji and it is eventually breaking it.

Is anybody aware of any way of detecting that the first element is an emoji and treat it correspondingly? Or maybe there's a better way of creating the initials other than this kind of split which will deal with emojis as well?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
cycero
  • 4,547
  • 20
  • 53
  • 78
  • 1
    This doesn't only break with emoji's but with all multi-byte characters. [That's because most languages treat text as bytes instead of characters / codepoints](https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/). – RobIII May 04 '23 at 14:41
  • 1
    you can use [...this.firstName][0] – cmgchess May 04 '23 at 14:42
  • Alternative: strip non-letter-y characters out and take it from there. What if I have TWO emojis? Chaos. – Dave Newton May 04 '23 at 14:50
  • @DaveNewton: Define "non-letter-y" characters. What about ◌̈ or 思 or ﷽? cycero should first sit down and think about what "initials" mean in non-latin languages (if applicable at all that is). – RobIII May 04 '23 at 14:53
  • @RobIII “non-letter-y” means just that. Pictographic languages don’t have letters; “initials” are non-sensical. There’s no **generic** approach since languages (and/or language groups) have their own conventions. In the context of **this question**, the one we’re answering/commenting on, it looks like the OP is addressing a specific use case. – Dave Newton May 04 '23 at 15:06
  • 2
    Does this answer your question? [How can I split a string containing emoji into an array?](https://stackoverflow.com/questions/24531751/how-can-i-split-a-string-containing-emoji-into-an-array) – 0stone0 May 04 '23 at 15:31

2 Answers2

3

an easy fix would be to create an array using spread and then get the first element

const firstName = 'ey'
console.log(firstName[0])

//split doesnt work
const firstNameArrSplit = firstName.split("")
console.log(firstNameArrSplit)

const firstNameArrSpread = [...firstName]
console.log(firstNameArrSpread)
console.log(firstNameArrSpread[0])
@computed public get initials() {
  const firstNameLetter = this.firstName
    ? [...this.firstName][0].toLocaleUpperCase()
    : '';
  const lastNameLetter = this.lastName
    ? [...this.lastName][0].toLocaleUpperCase()
    : '';

  return `${firstNameLetter}${lastNameLetter}`;
}

edit
didn't realize that there can be so many edge cases as 0stone0 mentioned in the comments. For a more sophisticated splitting this has better answers

cmgchess
  • 7,996
  • 37
  • 44
  • 62
1

Why we can't use array.from method here instead of split

const firstName = 'ey';

const res = Array.from(firstName);


console.log(res);
Yuvaraj M
  • 933
  • 1
  • 4
  • 11