以前、👩 のような絵文字を含む文字列の扱いに苦戦したので備忘録としてまとめ。
ライブラリの存在を知らなかったので、自力で実装しましたが、当然ながらライブラリ使った方が簡単＆確実でした。
使用したライブラリは「Runes」で、GitHub のページはこちらです。
dotcypress/runes: ✂️ Unicode-aware JS string splitting
https://github.com/dotcypress/runes
使い方は、まずライブラリを下記コマンドでインストールします。
npm install runes --save
あとは、任意のファイルでライブラリをインポートすれば、文字列を加工できます。
サンプルコードは下記のとおりです。
const runes = require('runes');
const result = runes('家族の絵文字👩👩👧👦');
上記を実行すると、1文字ずつ分割された状態で配列に格納されます。
なお、私は今回は使いませんでしたが、runes.substr() を使えば、先頭から○文字以降の文字列を抜き出すこともできます。
で、何故このライブラリを使うかというと、文字列の分割を行う際、JavaScript では .split() や .substring() を使用するかと思いますが、文字列に絵文字が含まれていると予期しない動作をする場合があります。
詳しくは、上記のページにサンプルコードがあるのでご確認頂ければと思いますが、場合によっては絵文字内で文字列の分割を行ってしまい、絵文字が違うものに置き換えられてしまったり、白い四角に置き換わったりしてしまいます。
特に Android は絵文字が存在しないと白い四角＝豆腐に置き換えられるのが確認でき、見た目が非常に宜しくない。
このライブラリを使えばそれらの問題を解決できるので、もし文字列の中に絵文字が含まれており、それを分割する場合は、是非 Runes の導入を検討すると良いと思います！
以上、JavaScript で絵文字が含まれている文字列を安全に分割できるライブラリ「Runes」のご紹介でした。
ご参考になれば幸いです。
