JavaScriptで文字数をカウントする

• 文字数制限がある場合等、文字数を正確にカウントするときの処理

方法１：.lengthで数える（×）

// 半角英数字の場合
const sample1 = "12345abcde";
console.log(sample1.length);               // 10  （〇）

// 全角英数字の場合
const sample2 = "１２３４５ＡＢＣＤＥ";
console.log(sample2.length);               // 10  （〇）

// 絵文字の場合
const sample3 = "😀🤣😅😍😲😨😩😱🤬👽";
console.log(sample3.length);               // 20  （×）

方法２：配列に変換する（〇）

// 半角英数字の場合
const sample1 = "12345abcde";
console.log(Array.from(sample1).length);    // 10  （〇）

// 全角英数字の場合
const sample2 = "１２３４５ＡＢＣＤＥ";
console.log(Array.from(sample2).length);    // 10  （〇）

// 絵文字の場合
const sample3 = "😀🤣😅😍😲😨😩😱🤬👽";
console.log(Array.from(sample3).length);    // 10  （〇）

方法３：配列に変換する（スプレッド構文を使用する）（〇）

// 半角英数字の場合
const sample1 = "12345abcde";
const buf = [...sample1];
console.log(buf .length);               // 10  （〇）

// 全角英数字の場合
const sample2 = "１２３４５ＡＢＣＤＥ"
const buf = [...sample2];
console.log(buf .length);               // 10  （〇）

// 絵文字の場合
const sample3 = "😀🤣😅😍😲😨😩😱🤬👽"
const buf = [...sample3];
console.log(buf .length);               // 10  （〇）

その他の記事について

overworker.hatenablog.jp