문자열

JavaScript에서는 텍스트 데이터가 문자열로 저장됩니다. 단일 문자에 대해 별도의 유형이 없습니다.

문자열의 내부 형식은 항상 UTF-16이며 페이지 인코딩과 연결되지 않습니다.

인용 부호

인용문의 종류를 기억해 봅시다.

문자열은 작은따옴표, 큰따옴표 또는 백틱으로 묶을 수 있습니다.

 let Single = '작은따옴표';
let double = "큰따옴표";

백틱 = `백틱`;

작은따옴표와 큰따옴표는 본질적으로 동일합니다. 그러나 백틱을 사용하면 ${…} 로 감싸서 문자열에 표현식을 삽입할 수 있습니다.

 함수 합계(a, b) {
  a + b를 반환합니다.
}

Alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.

백틱 사용의 또 다른 장점은 문자열을 여러 줄에 걸쳐 사용할 수 있다는 것입니다.

 let guestList = `손님:
 * 존
 * 피트
 * 메리
`;

경고(guestList); // 손님 목록, 여러 줄

자연스러워 보이죠? 그러나 작은따옴표나 큰따옴표는 이런 방식으로 작동하지 않습니다.

이를 사용하고 여러 줄을 사용하려고 하면 오류가 발생합니다.

 let guestList = "게스트: // 오류: 예상치 못한 토큰이 잘못되었습니다.
  * 존";

작은따옴표와 큰따옴표는 여러 줄 문자열의 필요성을 고려하지 않은 고대 언어 생성 시대부터 유래되었습니다. 백틱은 훨씬 나중에 등장했기 때문에 더 다양하게 사용할 수 있습니다.

백틱을 사용하면 첫 번째 백틱 앞에 "템플릿 함수"를 지정할 수도 있습니다. 구문은 func`string` 입니다. func 함수는 자동으로 호출되고 문자열과 포함된 표현식을 수신하여 처리할 수 있습니다. 이 기능은 "태그된 템플릿"이라고 불리며 거의 볼 수 없지만 MDN: 템플릿 리터럴에서 이에 대해 읽을 수 있습니다.

특수 문자

줄 바꿈을 나타내는 n 으로 쓰여진 소위 "개행 문자"를 사용하여 작은따옴표와 큰따옴표로 여러 줄 문자열을 만드는 것이 여전히 가능합니다:

 let guestList = "손님:n * Johnn * Peten * Mary";

경고(guestList); // 위와 같은 손님의 여러 줄 목록

더 간단한 예로, 다음 두 줄은 동일하지만 다르게 작성되었습니다.

 let str1 = "HellonWorld"; // "개행 기호"를 사용하는 두 줄

// 일반 개행 문자와 역따옴표를 사용하는 두 줄
str2 = `안녕하세요
세계`;

경고(str1 == str2); // 진실

덜 일반적인 다른 특수 문자도 있습니다.

보시다시피 모든 특수 문자는 백슬래시 문자 로 시작합니다. "이스케이프 문자"라고도 합니다.

매우 특별하기 때문에 문자열 내에 실제 백슬래시 표시해야 하는 경우 이를 두 배로 늘려야 합니다.

 경고( `백슬래시: \` ); // 백슬래시: 

소위 "이스케이프된" 따옴표 ' , " , ` 는 동일한 따옴표 붙은 문자열에 따옴표를 삽입하는 데 사용됩니다.

예를 들어:

 Alert( '나는 바다코끼리입니다!' ); // 나는 바다코끼리다!

보시다시피, 내부 따옴표 앞에 백슬래시 ' 추가해야 합니다. 그렇지 않으면 문자열 끝을 나타내기 때문입니다.

물론, 둘러싸는 것과 동일한 따옴표만 이스케이프해야 합니다. 따라서 보다 우아한 솔루션으로 대신 큰따옴표나 역따옴표로 전환할 수 있습니다.

 Alert( "나는 바다코끼리입니다!" ); // 나는 바다코끼리다!

이러한 특수 문자 외에도 유니코드 코드 u… 에 대한 특수 표기법도 있습니다. 이 표기법은 거의 사용되지 않으며 유니코드에 대한 선택적 장에서 다룹니다.

문자열 길이

length 속성에는 문자열 길이가 있습니다.

 경고( `내n`.length ); // 3

n 단일 "특수" 문자이므로 길이는 실제로 3 입니다.

length 는 재산이다

일부 다른 언어에 대한 배경 지식이 있는 사람들은 str.length 대신 str.length() 호출하여 잘못 입력하는 경우가 있습니다. 작동하지 않습니다.

str.length 는 함수가 아니라 숫자 속성입니다. 뒤에 괄호를 추가할 필요가 없습니다. .length() 가 아니라 .length 입니다.

캐릭터에 접근하기

pos 위치에 있는 문자를 얻으려면 대괄호 [pos] 사용하거나 str.at(pos) 메서드를 호출하세요. 첫 번째 문자는 0 위치에서 시작됩니다.

 str = `안녕하세요`;

// 첫 번째 문자
경고( str[0] ); // 시간
경고( str.at(0) ); // 시간

// 마지막 문자
경고( str[str.length - 1] ); //오
경고( str.at(-1) );

보시다시피 .at(pos) 메소드는 음수 위치를 허용한다는 이점이 있습니다. pos 음수이면 문자열 끝부터 계산됩니다.

따라서 .at(-1) 마지막 문자를 의미하고 .at(-2) 그 앞의 문자를 의미합니다.

대괄호는 음수 인덱스에 대해 항상 undefined 을 반환합니다. 예를 들면 다음과 같습니다.

 str = `안녕하세요`;

경고( str[-2] ); // 한정되지 않은
경고( str.at(-2) ); // 내가

for..of 사용하여 문자를 반복할 수도 있습니다.

 for (let char of "Hello") {
  경고(문자); // H,e,l,l,o (char는 "H", "e", "l" 등이 됩니다)
}

문자열은 불변이다

JavaScript에서는 문자열을 변경할 수 없습니다. 캐릭터 변경은 불가능합니다.

작동하지 않는다는 것을 보여주기 위해 시도해 봅시다:

 str = '안녕하세요';

str[0] = 'h'; // 오류
경고( str[0] ); // 작동하지 않습니다

일반적인 해결 방법은 완전히 새로운 문자열을 만들어 이전 문자열 대신 str 에 할당하는 것입니다.

예를 들어:

 str = '안녕하세요';

str = 'h' + str[1]; // 문자열 교체

경고(str); // 안녕

다음 섹션에서는 이에 대한 더 많은 예를 살펴보겠습니다.

케이스 변경

toLowerCase() 및 toUpperCase() 메서드는 대소문자를 변경합니다.

 경고( '인터페이스'.toUpperCase() ); // 인터페이스
경고( '인터페이스'.toLowerCase() ); // 인터페이스

또는 단일 문자를 소문자로 만들고 싶다면 다음과 같이 하세요.

 경고( '인터페이스'[0].toLowerCase() ); // '나'

하위 문자열 검색

문자열 내에서 하위 문자열을 찾는 방법에는 여러 가지가 있습니다.

str.indexOf

첫 번째 방법은 str.indexOf(substr, pos)입니다.

주어진 위치 pos 에서 시작하여 str 에서 substr 을 찾고 일치하는 항목이 발견된 위치를 반환하거나 아무것도 찾을 수 없으면 -1 반환합니다.

예를 들어:

 let str = 'ID가 있는 위젯';

경고( str.indexOf('Widget') ); // 0, 'Widget'이 처음에 발견되었기 때문입니다.
경고( str.indexOf('widget') ); // -1, 찾을 수 없음, 검색 시 대소문자를 구분합니다.

경고( str.indexOf("id") ); // 1, 위치 1에서 "id"를 찾았습니다. (..id가 있는 idget)

선택적 두 번째 매개변수를 사용하면 주어진 위치에서 검색을 시작할 수 있습니다.

예를 들어, "id" 가 처음으로 나타나는 위치는 1 입니다. 다음 항목을 찾으려면 위치 2 부터 검색을 시작하겠습니다.

 let str = 'ID가 있는 위젯';

경고( str.indexOf('id', 2) ) // 12

모든 발생에 관심이 있다면 indexOf 루프에서 실행할 수 있습니다. 모든 새로운 호출은 이전 일치 이후의 위치로 이루어집니다.

 let str = '여우만큼 교활하고, 황소만큼 강함';

목표 = 'as'로 설정; //찾아보자

pos = 0으로 놔두세요;
동안 (참) {
  letfoundPos = str.indexOf(target, pos);
  if (foundPos == -1) 중단;

  경고( `${foundPos}에서 발견됨` );
  pos = 발견Pos + 1; // 다음 위치부터 검색을 계속합니다.
}

동일한 알고리즘을 더 짧게 배치할 수 있습니다.

 let str = "여우만큼 교활하고, 황소만큼 강하다";
let target = "as";

pos = -1로 놔두세요;
while ((pos = str.indexOf(target, pos + 1)) != -1) {
  경고(pos);
}

str.lastIndexOf(substr, position)

문자열의 끝부터 시작까지 검색하는 유사한 메서드 str.lastIndexOf(substr, position)도 있습니다.

발생 항목을 역순으로 나열합니다.

if 테스트에서 indexOf 사용하면 약간의 불편함이 있습니다. 다음과 같이 if 에 넣을 수 없습니다.

 let str = "ID가 포함된 위젯";

if (str.indexOf("위젯")) {
    Alert("찾았습니다"); // 작동하지 않습니다!
}

위 예의 alert 는 str.indexOf("Widget") 0 (시작 위치에서 일치하는 항목을 찾았음을 의미)을 반환하기 때문에 표시되지 않습니다. 맞습니다. 그러나 0 false 로 간주 if .

따라서 실제로 다음과 같이 -1 을 확인해야 합니다.

 let str = "ID가 포함된 위젯";

if (str.indexOf("Widget") != -1) {
    Alert("찾았습니다"); // 이제 작동합니다!
}

포함, 시작, 끝

보다 현대적인 방법인 str.includes(substr, pos)는 str 에 substr 포함되어 있는지 여부에 따라 true/false 반환합니다.

일치 여부를 테스트해야 하지만 해당 위치는 필요하지 않은 경우 올바른 선택입니다.

 Alert( "ID가 포함된 위젯".includes("Widget") ); // 진실

Alert( "안녕하세요".includes("안녕") ); // 거짓

str.includes 의 선택적 두 번째 인수는 검색을 시작할 위치입니다.

 Alert( "Widget".includes("id") ); // 진실
Alert( "Widget".includes("id", 3) ); // false, 위치 3에는 "id"가 없습니다.

str.startsWith 및 str.endsWith 메소드는 다음과 같이 정확하게 수행됩니다.

 Alert( "Widget".startsWith("Wid") ); // true, "Widget"은 "Wid"로 시작합니다.
Alert( "Widget".endsWith("get") ); // true, "Widget"은 "get"으로 끝납니다.

하위 문자열 얻기

JavaScript에는 하위 문자열을 가져오는 3가지 메소드( substring , substr 및 slice 가 있습니다.

• str.slice(start [, end])

• start 에서 end 까지(포함하지 않음) 문자열 부분을 반환합니다.

  예를 들어:

   str = "문자열화";
  경고( str.slice(0, 5) ); // 'strin', 0부터 5까지의 하위 문자열(5는 포함하지 않음)
  경고( str.slice(0, 1) ); // 's', 0부터 1까지, 1은 포함하지 않음, 따라서 0에 있는 문자만

  두 번째 인수가 없으면 slice 문자열 끝까지 진행됩니다.

   str = "문자열화";
  경고( str.slice(2) ); // 'ringify', 2번째 위치부터 끝까지

  start/end 음수 값도 가능합니다. 이는 위치가 문자열 끝에서부터 계산된다는 의미입니다.

   str = "문자열화";
  
  // 오른쪽에서 4번째 위치에서 시작하여 오른쪽에서 1번째 위치에서 끝납니다.
  경고( str.slice(-4, -1) ); // 'gif'

• str.substring(start [, end])

• start 와 end 사이의 문자열 부분을 반환합니다( end 제외).

  이는 slice 와 거의 동일하지만 start end 보다 클 수 있습니다(이 경우 단순히 start 과 end 값을 바꿉니다).

  예를 들어:

   str = "문자열화";
  
  // 하위 문자열에도 동일합니다.
  경고( str.substring(2, 6) ); // "반지"
  경고( str.substring(6, 2) ); // "반지"
  
  // ...그러나 슬라이스에는 해당되지 않습니다.
  경고( str.slice(2, 6) ); // "링"(동일)
  경고( str.slice(6, 2) ); // ""(빈 문자열)

  음수 인수는 (슬라이스와 달리) 지원되지 않으며 0 으로 처리됩니다.

• str.substr(start [, length])

• 지정된 length 사용하여 start 에서 문자열의 일부를 반환합니다.

  이전 방법과 달리 이 방법을 사용하면 끝 위치 대신 length 지정할 수 있습니다.

   str = "문자열화";
  경고( str.substr(2, 4) ); // 'ring', 두 번째 위치부터 4자를 얻습니다.

  첫 번째 인수는 음수일 수 있으며 끝부터 계산합니다.

   str = "문자열화";
  경고( str.substr(-4, 2) ); // 'gi', 4번째부터 문자 2개를 얻습니다.

  이 방법은 언어 사양의 부록 B에 있습니다. 즉, 브라우저에서 호스팅되는 Javascript 엔진만 지원해야 하며 사용하지 않는 것이 좋습니다. 실제로는 모든 곳에서 지원됩니다.

혼란을 피하기 위해 이러한 방법을 요약해 보겠습니다.

어느 것을 선택할까요?

그들 모두는 그 일을 할 수 있습니다. 공식적으로 substr 사소한 단점이 있습니다. 이는 핵심 JavaScript 사양이 아니라 주로 역사적인 이유로 존재하는 브라우저 전용 기능을 다루는 부록 B에 설명되어 있습니다. 따라서 브라우저가 아닌 환경에서는 지원하지 못할 수 있습니다. 그러나 실제로는 모든 곳에서 작동합니다.

다른 두 가지 변형 중에서 slice 조금 더 유연하며, 부정적인 인수를 허용하고 작성 시간이 더 짧습니다.

따라서 실제 사용에서는 slice 만 기억하면 충분합니다.

문자열 비교

비교 장에서 알 수 있듯이 문자열은 알파벳 순서로 문자별로 비교됩니다.

그러나 몇 가지 이상한 점이 있습니다.

1. 소문자는 항상 대문자보다 큽니다.

    경고( 'a' > 'Z' ); // 진실

2. 발음 구별 부호가 있는 문자는 "순서가 잘못되었습니다":

    Alert( '외스터라이히' > '질랜드' ); // 진실

   이러한 국가 이름을 정렬하면 이상한 결과가 발생할 수 있습니다. 일반적으로 사람들은 Zealand 목록에서 Österreich 다음으로 올 것이라고 예상합니다.

무슨 일이 일어나는지 이해하려면 Javascript의 문자열이 UTF-16을 사용하여 인코딩된다는 점을 알아야 합니다. 즉, 각 문자에는 해당 숫자 코드가 있습니다.

코드에 대한 문자를 가져오고 다시 가져올 수 있는 특별한 방법이 있습니다.

• str.codePointAt(pos)

• pos 위치에 있는 문자의 코드를 나타내는 10진수를 반환합니다.

   // 대소문자에 따라 코드가 다릅니다.
  경고( "Z".codePointAt(0) ); // 90
  경고( "z".codePointAt(0) ); // 122
  경고( "z".codePointAt(0).toString(16) ); // 7a(16진수 값이 필요한 경우)

• String.fromCodePoint(code)

• 숫자 code 로 문자를 생성합니다.

   경고( String.fromCodePoint(90) ); // 지
  경고( String.fromCodePoint(0x5a) ); // Z (16진수 값을 인수로 사용할 수도 있음)

이제 문자열을 만들어 코드 65..220 (라틴 알파벳 및 약간의 추가 문자)이 있는 문자를 살펴보겠습니다.

 str = '';

for (let i = 65; i <= 220; i++) {
  str += String.fromCodePoint(i);
}
경고(str);
// 출력:
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~ € ‚f„
// ¡¢£¤¦§¨©ª«¬®́°±²³´μ¶·¸1º»¼½½¿ÀÁÂÃäÅÆÇÈÉÉîÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ

보다? 대문자가 먼저 나오고 그 다음 몇 가지 특수 문자, 그 다음 소문자, 그리고 출력 끝 부분에 Ö 가 옵니다.

이제 왜 a > Z 인지가 분명해졌습니다.

문자는 숫자 코드로 비교됩니다. 코드가 클수록 문자가 더 크다는 의미입니다. a (97)의 코드는 Z (90)의 코드보다 큽니다.

• 모든 소문자는 코드가 더 크기 때문에 대문자 뒤에 옵니다.

• Ö 와 같은 일부 문자는 기본 알파벳과 구별됩니다. 여기서 해당 코드는 a 에서 z 까지의 어떤 것보다 큽니다.

올바른 비교

문자열 비교를 수행하는 "올바른" 알고리즘은 언어마다 알파벳이 다르기 때문에 생각보다 더 복잡합니다.

따라서 브라우저는 비교할 언어를 알아야 합니다.

다행히 최신 브라우저는 국제화 표준 ECMA-402를 지원합니다.

규칙에 따라 다른 언어의 문자열을 비교하는 특별한 방법을 제공합니다.

str.localeCompare(str2) 호출은 언어 규칙에 따라 str 이 str2 보다 작거나 같거나 큰지 여부를 나타내는 정수를 반환합니다.

• str str2 보다 작은 경우 음수를 반환합니다.

• str str2 보다 큰 경우 양수를 반환합니다.

• 동일하면 0 반환합니다.

예를 들어:

 Alert( 'Österreich'.localeCompare('Zealand') ); // -1

이 메소드에는 실제로 문서에 지정된 두 개의 추가 인수가 있습니다. 이를 통해 언어를 지정하고(기본적으로 환경에서 가져오며 문자 순서는 언어에 따라 다름) 대소문자 구분 또는 "a" 및 "á" 와 같은 추가 규칙을 설정할 수 있습니다. 등등과 동일하게 취급됩니다.

요약

• 견적에는 3가지 종류가 있습니다. 백틱을 사용하면 문자열이 여러 줄에 걸쳐 ${…} 식을 포함할 수 있습니다.

• 줄 바꿈 n 과 같은 특수 문자를 사용할 수 있습니다.

• 문자를 얻으려면 [] 또는 at 메소드를 사용하십시오.

• 하위 문자열을 얻으려면 다음을 사용하십시오: slice 또는 substring .

• 문자열을 소문자/대문자로 바꾸려면 다음을 사용하세요: toLowerCase/toUpperCase .

• 하위 문자열을 찾으려면 indexOf 사용하거나 간단한 검사를 위해 includes/startsWith/endsWith 사용하세요.

• 언어에 따라 문자열을 비교하려면 localeCompare 사용하고, 그렇지 않으면 문자 코드로 비교합니다.

문자열에는 몇 가지 다른 유용한 방법이 있습니다:

• str.trim() – 문자열의 시작과 끝에서 공백을 제거(“트림”)합니다.

• str.repeat(n) – 문자열을 n 번 반복합니다.

• ...설명서에서 더 많은 내용을 확인할 수 있습니다.

문자열에는 정규식으로 검색/바꾸기를 수행하는 메서드도 있습니다. 하지만 이는 큰 주제이므로 별도의 튜토리얼 섹션인 정규식에서 설명합니다.

또한 현재로서는 문자열이 유니코드 인코딩을 기반으로 하므로 비교에 문제가 있다는 점을 아는 것이 중요합니다. 유니코드, 문자열 내부 장에 유니코드에 대한 자세한 내용이 있습니다.

작업

첫 번째 문자를 대문자로

중요도: 5

첫 번째 문자가 대문자인 문자열 str 반환하는 함수 ucFirst(str) 를 작성하세요. 예를 들면 다음과 같습니다.

 ucFirst("존") == "존";

테스트를 통해 샌드박스를 엽니다.

해결책

JavaScript의 문자열은 변경할 수 없기 때문에 첫 번째 문자를 "대체"할 수 없습니다.

하지만 기존 문자열을 기반으로 첫 번째 문자를 대문자로 하여 새 문자열을 만들 수 있습니다.

 let newStr = str[0].toUpperCase() + str.slice(1);

하지만 작은 문제가 있습니다. str 이 비어 있으면 str[0] 은 undefined 이고 undefined 에는 toUpperCase() 메서드가 없으므로 오류가 발생합니다.

가장 쉬운 방법은 다음과 같이 빈 문자열에 대한 테스트를 추가하는 것입니다.

 함수 ucFirst(str) {
  if (!str) return str;

  return str[0].toUpperCase() + str.slice(1);
}

경고(ucFirst("존") ); // 존

샌드박스에서 테스트를 통해 솔루션을 엽니다.

스팸 확인

중요도: 5

str 에 'viagra' 또는 'XXX'가 포함되어 있으면 true false 반환하는 함수 checkSpam(str) 작성하세요.

함수는 대소문자를 구분해야 합니다.

 checkSpam('지금 ViAgRA 구매') == true
checkSpam('무료 xxxxx') == true
checkSpam("순진한 토끼") == false

테스트를 통해 샌드박스를 엽니다.

해결책

검색에서 대소문자를 구분하지 않으려면 문자열을 소문자로 가져온 다음 검색해 보겠습니다.

 함수 checkSpam(str) {
  let lowerStr = str.toLowerCase();

  return lowerStr.includes('viagra') || lowerStr.includes('xxx');
}

Alert( checkSpam('지금 ViAgRA 구입') );
경고( checkSpam('무료 xxxxx') );
Alert( checkSpam("순진한 토끼") );

샌드박스에서 테스트를 통해 솔루션을 엽니다.

텍스트 자르기

중요도: 5

str 의 길이를 확인하고 maxlength 초과하는 경우 str 의 끝을 줄임표 문자 "…" 로 바꾸어 길이를 maxlength 와 동일하게 만드는 함수 truncate(str, maxlength) 를 만듭니다.

함수의 결과는 잘린(필요한 경우) 문자열이어야 합니다.

예를 들어:

 truncate("이 주제에 대해 내가 말하고 싶은 것은:", 20) == "내가 하고 싶은 것은…"

truncate("안녕하세요 여러분!", 20) == "안녕하세요 여러분!"

테스트를 통해 샌드박스를 엽니다.

해결책

최대 길이는 maxlength 여야 하므로 줄임표를 위한 공간을 제공하기 위해 조금 더 짧게 잘라야 합니다.

줄임표에는 실제로 단일 유니코드 문자가 있습니다. 점 3개가 아닙니다.

 함수 자르기(str, 최대 길이) {
  반환(str.length > maxlength) ?
    str.slice(0, maxlength - 1) + '…' : str;
}

샌드박스에서 테스트를 통해 솔루션을 엽니다.

돈을 추출하세요

중요도: 4

"$120" 형식의 비용이 있습니다. 즉, 달러 기호가 먼저 오고 그다음에 숫자가 옵니다.

해당 문자열에서 숫자 값을 추출하여 반환하는 extractCurrencyValue(str) 함수를 만듭니다.

예:

 경고( extractCurrencyValue('$120') === 120 ); // 진실

테스트를 통해 샌드박스를 엽니다.

해결책

 함수 extractCurrencyValue(str) {
  return +str.slice(1);
}

샌드박스에서 테스트를 통해 솔루션을 엽니다.