javascript lengthプロパティ使用時に1文字が2文字とカウントされる場合の対処法

javascript lengthプロパティ使用時に1文字が2文字とカウントされる場合の対処法

javascriptで、lengthプロパティ使用時に1文字が2文字とカウントされる場合の原因と対処法を記述してます。絵文字などのサロゲートペア文字列が含まれている場合に発生します。

環境

  • OS windows10 pro 64bit
  • Nginx 1.18.0

※windows10にnginxのインストールはこちら

エラー内容

以下のような絵文字を、lengthプロパティで文字列の長さを取得したときに発生します。

2文字なのに4文字と認識されてしまいます。

これは、文字コードを16bitで扱うと最大6万5536字までしか扱えないため、枠に収まらない文字に関しては、その倍は32bitで表現しているため、
倍の2文字として扱われてしまうため起こる。

対処法

javascriptの場合、サロゲートペア文字列を別の文字に置換して長さを取得方法があります。

以下は、入力したサロゲートペア文字が含まれた文字列の長さを正しく取得するサンプルコードとなります。

※cssには「uikit」を使用してます。

サロゲートペア文字が含まれていても正しくカウントされていることが確認できます。