2017/11/26 - [IT/JavaScript・자바 스크립트] - [JavaScript] 자바스크립트 강좌 입문 #6 데이터형 - 문자열 ・특정 문자 입력(이스케이프 시퀀스) 문자를 문자열을 값으로 사용하는 경우 키보드로 입력 불가능한 문자가 있습니다. 예를 들면 개행문자가 있습니다. 문자열에서 개행을 키보드로 입력하면 다음과 같이 됩니다.
위의 예에서는 [안녕하세요]와 [잘 지내세요?]의 사이에 개행을 입력하려고 하였지만 키보드에서 [Enter] 키를 누르면 코드의 개행만이 됩니다. 전 페이지에서 다루었던 내용에 JavaScript에서 문자열 도중에는 개행을 할 수 없다고 했었습니다. 그래서 개행등 키보드로 입력 불가능한 문자 등은 [\] + 특정 문자의 조합으로 표현합니다. 예를 들어 개행은 [\n]이라는 [\]과 [n]의 조합에 의해 표현할 수 있습니다.
위처럼 [안녕하세요]와 [잘 지내세요?]의 사이에 [\n]이 작성하였습니다. [\n]은 개행을 의미하기 때문에 실행을 해보면 다이얼로그가 열리고 다음과 같이 표시됩니다. 이러하듯 키보드에서 입력 불가능한 문자를 다른 문자와의 조합으로 표현하는 것은 이스케이프 시퀀스라고 합니다. ・이스케이프 시퀀스 일람 JavaScript에는 이스케이프 시퀀스가 다음과 같이 정의되어 있습니다.
개행이나 수평 탭은 키보드로 입력 불가능한 문자이기 때문에 이스케이프 시퀀스가 존재하지만, [\']이나 [\"]의 경우에는 다음과 같은 이유가 있어 이스케이프 시퀀스가 제공되고 있습니다. 문자열은 싱글 쿼테이션 또는 더블 쿼테이션으로 감싸서 표현합니다. 하지만 싱글 쿼테이션이 포함되어 있는 문자열을 다음과 같이 작성해보겠습니다.
위처럼 문자열 안에서 문자열을 의미하는 싱글 쿼테이션을 사용한 경우 [t]와 [s] 사이의 [']는 문자가 아닌 문자열의 종료를 의미하는 [']로 잘못 해석 돼버립니다. 그렇기 때문에 위 문자열은 [It]이라는 문자열과 [s a pen]이라는 문자열로 잘못 해석 돼버립니다. 이러한 경우에 ['] 대신에 [\']를 작성하는 것으로 [']가 문자의 종료를 의미하는 것이 아닌 문자[']로 취급됩니다.
이번에는 [It's a pen]이라는 문자열로 인식되었습니다. 이러하듯 [\] 기호는 문자열 안에서 특수한 의미를 가지고 있기 때문에 [\]라는 문자를 특별한 문자가 아닌 단순한 문자 [\]로 사용하고 싶은 경우에도 이스케이프 시퀀스를 사용해 [\\]로 작성해줄 필요가 있습니다. 샘플 코드 sample2_1.html
※스크립트 파일은 HTML 파일이 있는 곳에 js 라는 폴더를 만들어 넣어줍니다. script2_1.js
실행하면 브라우저에 다음과 같이 표시됩니다. 다이얼로그에서는 문자열 안에 [\n]을 작성하였습니다. 이러 경우는 에스케이프 시퀀스 [\n]에 의해 [\n]이 개행 이라고 해석되어 문자열 도중에 개행이 들어가고 있습니다. 샘플 코드를 하나 더 확인해보겠습니다. sample2_2.html
※스크립트 파일은 HTML 파일이 있는 곳에 js 라는 폴더를 만들어 넣어줍니다. script2_2.js
실행하면 브라우저에 다음과 같이 표시됩니다. 이번에는 문자열 안에 [\\n]을 작성하였습니다. 이러한 경우는 우선 에스케이프 시퀀스 [\\]에 의해 [\\]는 단순히 문자 [\]로 해석됩니다. 그렇기 때문에 [\\n] 전체적으로는 문자 [\]와 문자 [n]으로 해석되기 때문에 개행이 아닌 [\n]가 화면에 표시됩니다. 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없습니다. 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다. 자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다. 따옴표따옴표의 종류가 무엇이 있었는지 상기해봅시다. 문자열은 작은따옴표나 큰따옴표, 백틱으로 감쌀 수 있습니다.
작은따옴표와 큰따옴표는 기능상 차이가
없습니다. 그런데 백틱엔 특별한 기능이 있습니다. 표현식을
백틱을 사용하면 문자열을 여러 줄에 걸쳐 작성할 수도 있습니다.
자연스럽게 여러 줄의 문자열이 만들어졌네요. 작은따옴표나 큰따옴표를 사용하면 위와 같은 방식으로 여러 줄짜리 문자열을 만들 수 없습니다. 아래 예시를 실행해봅시다. 에러가 발생합니다.
작은따옴표나 큰따옴표로 문자열을 표현하는 방식은 자바스크립트가 만들어졌을 때부터 있었습니다. 이때는 문자열을 여러 줄에 걸쳐 작성할 생각조차 못 했던 시기였죠. 백틱은 그 이후에 등장한 문법이기 때문에 따옴표보다 다양한 기능을 제공합니다. 백틱은 '템플릿 함수(template function)'에서도 사용됩니다. 특수 기호'줄 바꿈 문자(newline character)'라 불리는 특수기호
따옴표를 이용해 만든 여러 줄 문자열과 백틱을 이용해 만든 여러 줄 문자열은 표현 방식만 다를 뿐 차이가 없습니다.
자바스크립트엔 줄 바꿈 문자를 비롯한 다양한 ‘특수’ 문자들이 있습니다. 특수 문자 목록:
유니코드를 사용한 예시:
모든 특수 문자는 '이스케이프 문자(escape character)'라고도 불리는 역슬래시 (backslash character) 역슬래시는 문자열 내에 따옴표를 넣을 때도 사용할 수 있습니다. 예시:
위 예시에서 살펴본 바와 같이 문자열 내의 따옴표엔
이스케이프 문자는 문자열을 감쌀 때 사용한 따옴표와 동일한 따옴표에만 붙여주면 됩니다. 문자열 내에서 좀 더 우아하게 따옴표를 사용하려면 아래와 같이 따옴표 대신 백틱으로 문자열을 감싸주면 됩니다.
역슬래시 그렇다면 문자열 안에 역슬래시
문자열의 길이
자바스크립트 이외의 언어를 사용했던 개발자들은
특정 글자에 접근하기문자열 내 특정 위치인
근래에는
대괄호를 이용하는 방식을 사용합니다. 두 접근 방식의 차이는 반환할 글자가 없을 때 드러납니다. 접근하려는 위치에 글자가 없는 경우
문자열의 불변성문자열은 수정할 수 없습니다. 따라서 문자열의 중간 글자 하나를 바꾸려고 하면 에러가 발생합니다. 직접 실습해봅시다.
이런 문제를 피하려면 완전히 새로운 문자열을 하나 만든 다음, 이 문자열을 예시:
유사한 예시는 이어지는 절에서 살펴보겠습니다. 대·소문자 변경하기메서드 toLowerCase()와 toUpperCase()는 대문자를 소문자로, 소문자를 대문자로 변경(케이스 변경)시켜줍니다.
글자 하나의 케이스만 변경하는 것도 가능합니다.
부분 문자열 찾기문자열에서 부분 문자열(substring)을 찾는 방법은 여러 가지가 있습니다. str.indexOf첫 번째 방법은 str.indexOf(substr, pos) 메서드를 이용하는 것입니다. 이 메서드는 문자열 예시:
부분 문자열
문자열 내 부분 문자열 전체를 대상으로 무언가를 하고 싶다면 반복문 안에
동일한 알고리즘을 사용해 코드만 짧게 줄이면 다음과 같습니다.
따라서 부분 문자열 여부를 검사하려면 아래와 같이
비트 NOT 연산자를 사용한 기법오래전부터 전해 오는 비트(bitwise) NOT 연산자 따라서 예시:
위 예시에서 본 바와 같이 부호가 있는 32비트 정수 이를 응용해서 이렇게
사실 이렇게 언어 특유의 기능을 사용해 직관적이지 않은 코드를 작성하는 것을 추천해 드리진 않습니다. 그렇지만 위와 같은 기법은 오래된 스크립트에서 쉽게 만날 수 있기 때문에 알아두어야 합니다.
참고로 모던 자바스크립트에선 includes, startsWith, endsWith비교적 근래에 나온 메서드인 str.includes(substr, pos)는 부분 문자열의 위치 정보는 필요하지 않고 포함 여부만 알고 싶을 때 적합한 메서드입니다.
메서드 str.startsWith와 str.endsWith는 메서드 이름 그대로 문자열
부분 문자열 추출하기자바스크립트엔 부분 문자열 추출과 관련된 메서드가 세 가지 있습니다. 세 가지 메서드 str.slice(start [, end]) 문자열의 예시:
두 번째 인수가 생략된 경우엔, 명시한 위치부터 문자열 끝까지를 반환합니다.
str.substring(start [, end])
예시:
str.substr(start [, length])
첫 번째 인수가 음수면 뒤에서부터 개수를 셉니다.
부분 문자열 추출과 관련된 메서드를 요약해 봅시다.
어떤 메서드를 선택해야 하나요? 모두 사용해도 괜찮습니다. 그런데 남은 두 메서드 중 문자열 비교하기비교 연산자 챕터에서 알아보았듯이 문자열을 비교할 땐 알파벳 순서를 기준으로 글자끼리 비교가 이뤄집니다. 그런데 아래와 같이 몇 가지 이상해 보이는 것들이 있습니다.
자바스크립트 내부에서 문자열이 어떻게 표시되는지 상기하며 원인을 알아봅시다. 모든 문자열은 UTF-16을 사용해 인코딩되는데, UTF-16에선 모든 글자가 숫자 형식의 코드와 매칭됩니다. 코드로 글자를 얻거나 글자에서 연관 코드를 알아낼 수 있는 메서드는 다음과 같습니다. str.codePointAt(pos)
String.fromCodePoint(code)
숫자 형식의
이제 이 배경지식을 가지고 코드
보이시나요? 대문자 알파벳이 가장 먼저 나오고 특수 문자 몇 개가 나온 다음에 소문자 알파벳이 나오네요. 이제 왜 글자는 글자에 대응하는 숫자 형식의 코드를 기준으로 비교됩니다. 코드가 크면 대응하는 글자 역시 크다고 취급되죠. 따라서
문자열 제대로 비교하기언어마다 문자 체계가 다르기 때문에 문자열을 ‘제대로’ 비교하는 알고리즘을 만드는 건 생각보다 간단하지 않습니다. 문자열을 비교하려면 일단 페이지에서 어떤 언어를 사용하고 있는지 브라우저가 알아야 합니다. 다행히도 모던 브라우저 대부분이 국제화 관련 표준인 ECMA-402를 지원합니다(IE10은 아쉽게도 Intl.js 라이브러리를 사용해야 합니다). ECMA-402엔 언어가 다를 때 적용할 수 있는 문자열 비교 규칙과 이를 준수하는 메서드가 정의되어있습니다. str.localeCompare(str2)를 호출하면 ECMA-402에서 정의한 규칙에 따라
예시:
문자열 심화심화 학습 이번 절에선 문자열을 더 깊게 다룹니다. 이모티콘이나 일부 수학 기호, 상형 문자를 비롯한 희귀 기호 등을 다뤄야 한다면 앞으로 배울 내용이 유용하게 사용될 것입니다. 이런 글자들을 사용할 계획이 없다면 본 절을 넘어가셔도 좋습니다. 서로게이트 쌍자주 사용되는 글자들은 모두 2바이트 코드를 가지고 있습니다. 유럽권 언어에서 사용되는 글자, 숫자, 상형 문자 대다수는 2바이트 표현 체계를 사용합니다. 그런데 2바이트는 65,536(2의 16승 – 옮긴이)개의 조합밖에 만들어내지 못하기 때문에 현존하는 기호를 모두 표현하기에 충분하지 않습니다. 이를 극복하기 위해 사용 빈도가 낮은 기호는 '서로게이트 쌍(surrogate pair)'이라 불리는 2바이트 글자들의 쌍을 사용해 인코딩합니다. 서로게이트 쌍을 사용해 인코딩한 기호의 길이는
자바스크립트가 만들어졌을 당시엔 서로게이트 쌍은 존재하지 않았습니다. 따라서 자바스크립트는 서로게이트 쌍으로 표현한 기호를 제대로 처리하지 못합니다. 위 예시에서 기호는 하나지만 길이는
서로게이트 쌍은 두 글자로 취급되기 때문에 기호를 가져오는 게 꽤 까다롭습니다.
서로게이트 쌍을 구성하는 글자들은 붙어있을 때만 의미가 있다는 점에 유의해야 합니다. 따라서 위 예시를 실행하면 얼럿창엔 의미 없는 쓰레기 기호가 출력됩니다. 기술적으로 서로게이트 쌍은 서로게이트 쌍에 대응하는 코드를 사용해 감지할 수 있습니다. 글자의 코드가 예시를 살펴봅시다.
서로게이트 쌍을 다루는 다양한 방법에 대해선 iterable 객체 챕터에서 살펴보겠습니다. 서로게이트 쌍 관련 라이브러리도 있긴 한데 소개해 드릴 만한 라이브러리는 아직까진 없는 상황입니다. 발음 구별 기호와 유니코드 정규화여러 언어에서 베이스가 되는 글자 위나 아래에 발음 구별 기호라 불리는 기호를 붙여 글자를 만듭니다.
임의의 조합을 지원하기 위해 UTF-16에선 몇 개의 유니코드 문자를 남겨두었습니다. 베이스 글자 뒤에 하나 혹은 여러 개의 유니코드 문자를 붙여 베이스 글자를 꾸밀 수 있도록 말이죠. 이를 이용하면 베이스 글자
발음 구별 기호를 하나 붙인 상태에서 추가 발음 구별 기호가 필요한 경우에도 문제가 없습니다. 필요한 기호의 유니코드 문자를 붙여주기만 하면 됩니다. Ṡ에 '아래 점’을 나타내는 유니코드 문자( 예시:
이런 방식은 엄청난 유연성을 제공하는데, 단점도 있습니다. 눈으로 봤을 때는 같은 글자인데 유니코드 조합이 다른 경우가 생깁니다. 예시:
이런 문제를 해결하려면 '유니코드 정규화(unicode normalization)'라 불리는 알고리즘을 사용해 각 문자열을 동일한 형태로 '정규화’해야 합니다. 유니코드 정규화 알고리즘은 str.normalize()에 구현되어 있습니다.
S 위, 아래에 점을 붙이는 사례에선
그런데 현실은 항상 이렇지 않습니다.
실무에선 이 절에서 다룬 내용만으로도 충분하지만, 정규화 규칙과 변형에 대해 더 알고 싶다면 유니코드 표준 부록의 Unicode Normalization Forms에 해당 내용이 있으니 참고하시기 바랍니다. 요약
이외에도 문자열에 쓸 수 있는 유용한 메서드 몇 가지가 있습니다.
정규 표현식을 사용해 문자열을 찾거나 교체해주는 메서드도 여러 개 있는데 이는 아주 큰 주제이기 때문에 별도의 섹션 정규 표현식에서 다루겠습니다. |