[JavaScript] 자바스크립트 문자열의 길이(문자의 수) 확인하기 length()

026_자바스크립트 문자열의 길이(문자의 수) 확인하기 length()

[적용]

• 입력폼에서 문자열의 길이를 확인하고 싶을 때

---

[문법]

속성	의미	타입
문자열.length	문자열의 길이 (문자의 수)	숫자
Array.from(문자열).length	문자열의 길이 (문자의 수)	숫자

---

[예시]

'문자열.length'로 문자열의 길이(문자의 수) 확인이 가능하다. 다음에서 확인해 보자

 

JavaScript

'노는아빠'.length;  // 4
'JavaScript'/length;  // 10

---

[예시2]

텍스트 영역(Textarea)에 입력 중인 문자의 수를 카운팅하는 샘플을 확인해 보자

 

HTML                                                                                                                                                              index.html

<textarea class="textarea"></textarea>
<p>현재 <span class="string_sum">0</span>글자를 입력하였습니다.</p>

JavaScript                                                                                                                                                          main.js

/** 텍스트 영역(textarea) */
let textarea = document.querySelector('.textarea');

/** 입력 중인 문자 수 */
let string_num = document.querySelector('.string_num');

// 텍스트를 입력할 때마다 onKeyUp()을 실행
textarea.addEventListener('keyup', onKeyUp);

function onKeyUp() {
    // 입력된 텍스트
    const inputText = textarea.value;
    // 문자 수를 반영
    string_num.innerText = inputText.length;
}

[실행결과]

---

[Appendix]

문자에 따라 length로 확인 불가능할 때가 있다.

다음과 같은 문자는 문자열의 길이를 length로 확인해도 1이 아니다.

'😍'.length;  // 2
'🌈'.length;  // 2

원인은 이 문자들이 Surrogate Pair이기 때문이다.

자바스크립트는 기본적으로 하나의 문자를 2바이트로 표현하지만, 이모티콘과 특수 문자는 4바이트로 표현한다.

이렇게 4바이트로 표현되는 문자를 Surrogate Pair라고 한다.

Surrogate Pair를 하나의 문자로 인식하기 위해서는 다음과 같이 Array.from()을 사용한다.

Array.from('😍').length;  // 1
Array.from('🌈').length;  // 1

 

---

[JavaScript] 자바스크립트에서 문자열 다루기

[JavaScript] 자바스크립트에서 문자열 다루기

---

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

---

[JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색)

[JavaScript] 자바스크립트에서 문자열(인덱스) 검색하기

---

[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

---

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

---

[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

---

[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

[JavaScript] 자바스크립트 지정 문자열 변환하기

[JavaScript] 자바스크립트 지정 문자열 변환하기

---

[JavaScript] 자바스크립트 문자열 나누기

[JavaScript] 자바스크립트 문자열 나누기

---

[JavaScript] 자바스크립트 문자열 합치기

[JavaScript] 자바스크립트 문자열 합치기

---

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

---

[JavaScript] 자바스크립트 문자열과 식 함께 다루기

[JavsScript] 자바스크립트 문자열과 식 함께 다루기

---

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

---

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

 

---

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김