使用Runes库解决笔记Tooltip排序中的Emoji字符截取问题

Hey there! I’ve dealt with this exact emoji substring headache before—super annoying when standard string methods break down for Unicode characters. Here are two clean, reusable solutions to avoid repeating that runes.substr() call across all your notes:

1. Wrap Runes in a Reusable Utility Function #

Since you’re already using the Runes library, create a single helper function that handles the first character extraction once, then call it everywhere you need it:

import runes from 'runes';

// Reusable function to get the first character (works for emojis and plain text)
const extractFirstCharacter = (tooltipText) => {
  if (!tooltipText) return ''; // Handle empty input gracefully
  return runes.substr(tooltipText, 0, 1);
};

How to use it: #

Instead of writing runes.substr(noteTooltip, 0, 1) for every note, just do:

const firstChar = extractFirstCharacter(noteTooltip);

This keeps your code DRY (Don’t Repeat Yourself) and centralizes the logic if you ever need to adjust it later.

2. Native JavaScript Alternative (No Third-Party Library) #

If you want to ditch the Runes dependency entirely, use Array.from()—it correctly handles Unicode surrogate pairs (like emojis that take up 2 code units) by splitting the string into actual characters:

const extractFirstCharacter = (tooltipText) => {
  if (!tooltipText) return '';
  return Array.from(tooltipText)[0] || '';
};

This works because Array.from() recognizes full Unicode characters, unlike substr() which counts code units. It’s lightweight and doesn’t require installing any packages.

Bonus: Add Type Safety (If Using TypeScript) #

If you’re working with TypeScript, you can add type annotations to make the function even more robust:

const extractFirstCharacter = (tooltipText: string | undefined | null): string => {
  if (!tooltipText) return '';
  return Array.from(tooltipText)[0] || '';
};

Either approach will solve your problem without repeating code—pick the one that fits your project’s dependencies and needs best!

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