JavaScriptで文字列の長さを取得する方法

入力フォームなどで、文字数をカウントしたい時には「文字列,length」プロパティを利用します。

構文

プロパティー意味
文字列.length文字列の長さ数値
Array.from(文字列).length文字列の長さ 数値
文字列の長さを図る

サンプルコード

単純に文字列を取得した場合は下記の様に記入すれば良いです。

JavaScript
'JavaScript'.length; //10文字

これだとサンプルとして簡素すぎるので、テキストエリアに入力中の文字列数をカウントするサンプルを紹介します。

Output

現在0文字列入力中です。

Pug
.container.my-5
 textarea.textarea.w-100
 p 
  | 現在
  span.text_num 0
  | 文字列入力中です。
 
JavaScript
/* テキストエリア */
let textarea = document.querySelector( '.textarea' );

/* 入力中の文字列数 */
let text_num = document.querySelector( '.text_num' );

//テキストを入力居する度にonKeyUp()を実行
textarea.addEventListener( 'keyup', onKeyUp);

function onKeyUp() {
	// 入力テキスト
	const inputText = textarea.value;
	//文字数を反映
	text_num.textContent = inputText.length;
}
コラム

通常、文字は2バイトで表現しますが、絵文字や特殊文字は4バイト文字で表現します。(サロゲートペア文字)

これらの文字も2バイトとしてカウントするには、 Array.from(文字列).length を利用します。

JavaScript
/* テキストエリア */
let textarea = document.querySelector( '.textarea' );

/* 入力中の文字列数 */
let text_num = document.querySelector( '.text_num' );

//テキストを入力居する度にonKeyUp()を実行
textarea.addEventListener( 'keyup', onKeyUp);

function onKeyUp() {
	// 入力テキスト
	const inputText = textarea.value;
	//文字数を反映
	text_num.textContent = Array.from( inputText ).length;
}
インストラクター
コメント

コメントを残す