<div id="readability-page-1" class="page"><div><div><h2 id="214d">문자열과 정규표현식</h2><div><a rel="noopener ugc nofollow" href="/?source=post_page-----6e32c2756dfb--------------------------------"><div aria-hidden="false"><img alt="Jeong Woo Ahn" src="https://miro.medium.com/v2/resize:fill:88:88/2*5-DkBQYvxo0TLldXjX88Og.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"></div></a></div></div>책 <a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=122260559" rel="noopener ugc nofollow" target="_blank">모던 자바스크립트</a>의 스터디 2장 준비하면서 정리한 글 공유한다.1장 정리글을 보려면 <a rel="noopener ugc nofollow" target="_blank" href="/모던-자바스크립트-스터디-1장-40a98d6d9b0d">모던 자바스크립트 1장 — 블록바인딩</a><h2 id="7bf9">2.1 더 나은 유니코드 지원</h2>ES6 이전에 JavaScript는 문자열의 각 문자가 <code>코드 단위</code>(코드 유닛)라고 불리는 16개의 연속 비트로 구성되는 방법을 사용했다. 기본 문자에는 괜찮았지만 유니코드와 확장 문자 집합이 도입되면서 16비트로는 더 이상 충분하지 않게 되었다.<h2 id="1073">2.1.1 UTF-16 코드 포인트</h2>UTF-16 코드 포인트는 UTF-16 인코딩 체계에서 문자를 나타내는 데 사용되는 숫자 값이다. 예를 들면<ul><li id="fbee">문자 ‘A’에 대한 UTF-16 코드 포인트는 0x0041(2진수로는 01000001, 10진수로는 65)</li></ul>UTF-16에서 각 문자는 일반적으로 하나 또는 두 개의 16비트 숫자로 표시된다. 처음 65,536개 범위의 문자는 더 간단한 하나의 16비트 숫자로 표시된다.이 범위를 <a href="https://unicode.org/roadmaps/bmp/" rel="noopener ugc nofollow" target="_blank">기본 다국어 평면(BMP)</a>이라고 한다. 단일 16비트 숫자로 표현할 수 있는 문자를 기본 다국어 평면이라고 한다. 이는 우리가 일반적으로 사용하는 대부분의 언어와 기호를 포함하는 “주” 문자 집합과 같다.문자의 첫 번째 범위인 BMP(Basic Multilingual Plane)를 넘어서는 UTF-16의 문자를 <a href="https://www.unicode.org/roadmaps/smp/" rel="noopener ugc nofollow" target="_blank">보충 평면(Supplementary Plane)</a>이라고 한다. 이러한 문자는 더 큰 코드 포인트 값을 가지므로 표시하려면 두 개 이상의 16비트 단위가 필요하다.이를 위해 두 개의 16비트 코드 유닛으로 표현하는 서로게이트 페어를 도입하여 이 문제를 해결했다.<ul><li id="f75e">‘🌍’의 상위 서로게이트는 0xD83C이고 하위 서로게이트는 0xDF0D입이다. 이 두 개의 서로게이트가 함께 서로게이트 쌍을 형성한다. 합쳐지면 ‘🌍’ 문자를 나타낸다.</li></ul>ES5에서는 서로게이트 페어를 포함하는 문자열을 UTF-16으로 인코딩하는 경우 예상치 못한 결과를 얻을 수 있다.<pre>const high = "古"; console.log(high.length); // 1 기본 다국어 평면이라 16비트로 표현됨. const emoji = "🙏"; console.log(emoji.length); // 2 보충 평면이라 16비트 두개로 표현되어야함. console.log(emoji.charCodeAt(0)); // 55357 console.log(emoji.charCodeAt(1)); // 56911</pre>한글과 관련된 이야기<ul><li id="3549">예전 조합형은 <code>한</code> → <code>ㅎ ㅏ ㄴ</code> 세가지 유니코드 포인트가 필요해서 메모리 낭비.</li><li id="f7ee">요즘은 완성형 <code>한</code>을 사용해서 하나의 유니코드 포인트로 가능.</li></ul><h2 id="957c">2.1.2 codePointAt() 메서드</h2>ES6에서는 UTF-16을 완전히 지원하기 위해 codePointAt() 메서드가 추가되었다. 이 메서드는 문자의 위치 대신 코드 유닛의 위치를 받고 하나의 정수 값을 반환한다.codePointAt() 메서드는 0 위치에서 전체 코드 포인트를 반환한다. 다만 1위치에서는 두번째 코드 유닛을 반환한다.(charCodeAt 과 동일하다.)<pre>console.log(emoji.codePointAt(0)); // 128591 console.log(emoji.codePointAt(1)); // 56911</pre>문자가 몇 개의 코드 포인트로 표현되는지 확인하는 방법은 codePointAt(0)의 결과가 65535(0xFFFF)보다 큰지 확인하면 된다.<pre>function is32Bit(c) { return c.codePointAt(0) &gt; 0xFFFF; }console.log(is32Bit(emoji)); // true</pre><h2 id="a431">2.1.3 String.fromCodePoint() 메서드</h2>codePointAt() 과 반대로 코드 포인트로 문자열을 만들 수 있다.<pre>console.log(String.fromCodePoint(128591)); // 🙏</pre><h2 id="74b4">2.1.4 nomalize() 메서드</h2>ES6에 도입된 JavaScript의 <code>normalize()</code> 메서드는 다양한 형태의 유니코드 문자를 처리하는 데 도움이 되기 때문에 국제 서비스를 구현하는 데 필수적이다.유니코드 문자는 악센트, 분음 부호 또는 결합 문자로 인해 여러 가지 표현을 가질 수 있다. 예를 들어 문자 “é”는 단일 문자로 표시되거나 “e”와 악센트 표시의 조합으로 표시될 수 있다. 이로 인해 특히 다국어 응용 프로그램에서 문자열을 비교하거나 처리할 때 불일치가 발생할 수 있다.<code>normalize()</code> 메서드를 사용하면 문자열을 표준화된 형식으로 변환하여 유니코드 문자가 포함된 문자열을 일관되게 처리하고 비교할 수 있다. 다양한 형식의 문자를 단일 표준 형식으로 변환하여 이를 수행한다.간단한 예는 다음과 같다.<pre>const str1 = 'café'; // "é" represented as a single character const str2 = 'cafe\u0301'; // "é" represented as "e" plus combining accentconsole.log(str1 === str2); // false, because the strings are not in the same formconst normalizedStr1 = str1.normalize(); const normalizedStr2 = str2.normalize();console.log(normalizedStr1 === normalizedStr2); // true, because both strings are normalized to the same form</pre>이 예에서 str1과 str2는 동일한 단어 ‘café’를 나타내지만 다른 유니코드 형식이다. normalize() 메소드를 사용하여 이를 정규화함으로써 일관된 비교를 위해 동일한 형식이 되도록 보장한다.<h2 id="6607">2.1.5 정규표현식의 u 플래그</h2>정규표현식은 각 문자를 16비트 코드 유닛으로 추정한다는 것을 기억해야 한다.정규표현식에 u 플래그가 있으면 코드 유닛이 아니라 문자를 처리하는 모드로 전환된다.정규식 <code>/^.$/</code> 은 단일 문자를 가진 모든 문자열 입력과 매칭된다.<pre>console.log(emoji.length); // 2 console.log(/^.$/.test(emoji)); // false console.log(/^.$/u.test(emoji)); // true</pre>이를 활용해 코드 포인트의 개수를 셀 수 있다.<pre>function codePointLength(text) { let result = text.match(/[\s\S]/gu); // ['🙏', 'h', 'i'] return result ? result.length : 0; } console.log(codePointLength('🙏hi')); // 3</pre><h2 id="41ed">2.2 문자열의 다른 변경 사항</h2><h2 id="77ef">2.2.1 부분 문자열 식별을 위한 메서드</h2><ul><li id="72e7">includes() 문자열의 어느 곳에서든 주어진 문자를 찾으면 true. 두 번째 인자로 검색을 시작할 인덱스를 받는다. 있으면 해당 인덱스 부터 매칭을 시작.</li><li id="bddc">startsWith() 문자열의 시작점에서 주어진 문자를 찾으면 true. 두 번째 인자로 검색을 시작할 인덱스를 받는다. 있으면 해당 인덱스 부터 매칭을 시작.</li><li id="dbf0">endsWith() 문자열의 끝에서 주어진 문자를 찾으면 true. 두 번째 인자로 검색을 시작할 인덱스를 받는다. 있으면 문자열의 길이에서 인덱스를 뺀 위치부터 매칭을 시작한다.</li></ul>각 메서드는 검색할 문자를 필수 인자로, 검색을 시작할 인덱스를 선택적인 인자로 받는다.<h2 id="bcaa">2.2.2 repeat() 메서드</h2>원본 문자열을 명시한 횟수만큼 반복하여 새로운 문자열을 반환한다.<pre>console.log("hello".repeat(2)); // hellohello // 코드 포매팅 유틸리티에서 유용하게 사용할 수 있다. const indent = " ".repeat(4); const indentLevel = 0; // repeat(3.5) -&gt; repeat(3)</pre><h2 id="4673">2.3 정규 표현식의 변경사항</h2><h2 id="b7a5">2.3.1 정규 표현식의 y 플래그</h2>ES6에서 표준화된 y 플래그는 정규 표현식 검색의 sticky 프로퍼티에 영향을 준다.sticky 프로퍼티는 문자열에서 정규 표현식의 lastIndex 프로퍼티로 명시된 위치의 문자에서 매칭을 시작하는 검색을 말한다.y 플래그는 연산이 수행될 때마다 마지막 매칭 후 다음 문자의 인덱스를 lastIndex 에 저장한다. 매칭되는 것이 없다면 0으로 설정한다.<pre>// Example 1: Using the y flag const regex = /cat/y; // y flag indicates sticky behavior// Matching from index 0 console.log(regex.exec('The cat is cute')); // null, because 'cat' is not at index 0// Matching from index 4 regex.lastIndex = 4; // Set the lastIndex to 4 console.log(regex.exec('The cat is cute')); // ["cat"], because 'cat' starts at index 4 // Moved lastIndex console.log(regex.lastIndex); // 7// Example 2: Using the sticky property const stickyRegex = /dog/y;// Check if the regex is sticky console.log(stickyRegex.sticky); // true, because the y flag is set</pre>lastIndex 프로퍼티는 exec(), test() 와 같은 정규 표현식 객체에 존재하는 메서드를 호출할 때만 영향을 받는다. match() 같은 문자열 메서드는 y 플래그를 전달받더라도 sticky 처럼 동작하지 않는다.<h2 id="59ff">2.3.2 정규 표현식 복사하기</h2><pre>const re1 = /ab/i; const re2 = new RegExp(re1); // r1의 사본 const re3 = new RegExp(re1, "g"); // 플래그 변경. ES5 에서는 에러.</pre><h2 id="ec47">2.3.3 flags 프로퍼티</h2>ES5에서는 source 프로퍼티로 정규 표현식 텍스트를 얻을 수 있었지만, 플래그 문자열을 얻기 위해서는 toString()의 결과를 파싱해야 했다.ES6에서는 flags 프로퍼티를 추가하여 더 쉽게 플래그를 얻을 수 있도록 했다.<pre>const re = /ab/g; console.log(re.source); // ab console.log(re.flags); // g</pre><h2 id="ca0e">2.4 템플릿 리터럴</h2>ES6의 템플릿 리터럴은 개발자가 더 복잡한 문제를 해결할 수 있도록 보다 안전한 방법으로 콘텐츠를 처리하는 도메인 특화 언어(DSL)을 만드는 문법을 제공한다.ES5와 이전 버전에서 부족했던 다음 특징에 대한 해결책이다.<ul><li id="1b9d">멀티라인 문자열의 공식적인 개념</li><li id="6606">변수 값을 문자열 일부분으로 대체하는 능력</li><li id="973c">HTML안에 안전하게 삽입될 수 있도록 문자열을 변경하는 능력.</li></ul><h2 id="2cb5">2.4.1 기본 문법</h2>백틱(`)으로 구분<pre>const message = `Hello world`; console.log(message); // Hello world const message2 = `\`Hello\` world`; console.log(message2); // `Hello` world</pre>도메인 특화언어(DSL)은 뭐고 템플릿 리터럴과 어떤 상관?DSL은 도메인 특정 언어를 의미. 특정 목적을 위해 만든 비밀 코드 언어라고 생각하면됨. 템플릿 리터럴을 사용하면 JavaScript 내에서 이러한 특수 언어를 쉽게 생성하여 특정 작업을 해결할 수 있다. 이는 특정 종류의 정보를 보다 효율적으로 이해하고 처리하는 데 도움이 되는 비밀 디코더 링을 갖는 것과 같다.GPT가 제시한 예제<pre>// 플레이어가 수수께끼를 풀어야 하는 게임을 작성한다고 가정해 보겠습니다. // 수수께끼와 그 해결책을 나타내기 위해 템플릿 리터럴을 사용하여 DSL을 만들 수 있습니다. // 이 DSL을 사용하면 게임 코드 내에서 수수께끼를 더 쉽게 관리하고 처리할 수 있습니다.// DSL function to represent a riddle function createRiddle(question, answer) { return ` Question: ${question} Answer: ${answer} `; }// Create a riddle using the DSL const riddle1 = createRiddle("What has keys but can't open locks?", "A piano"); console.log(riddle1);// 이 예에서 createRiddle 함수는 템플릿 리터럴을 사용하여 수수께끼를 나타내는 문자열을 생성합니다. // 이 DSL을 사용하면 게임 코드에서 수수께끼를 쉽게 만들고 관리할 수 있습니다. // 이는 게임 내에서 수수께끼를 처리하기 위한 특별한 언어를 갖는 것과 같으며, 코드를 더욱 체계화하고 이해하기 쉽게 만듭니다.</pre><h2 id="aae8">2.4.2 멀티라인 문자열</h2>ES6 이전에는 멀티라인 문자열을 구현하려면 실용적이거나 편리하지 않았음.ES6에서는<pre>const message = `Multiline string`; console.log(message); // "Multiline // string"</pre>백틱 내의 모든 공백은 문자열이다.<pre>const message = `Multiline string`; console.log(message); // "Multiline // string"</pre>백틱 안에서 개행을 나타내는 \n 을 사용할 수 있다.<h2 id="32ed">2.4.3 치환자 만들기</h2>템플릿 리터럴과 문자열의 실질적인 차이는 템플릿 리터럴 치환자에 있다. 치환자는 템플릿 리터럴 안의 모든 유효한 자바스크립트 표현식을 허용하고 그 결과를 문자열 일부로 치환해서 출력해준다.<pre>const name = "Nicholas"; const message = `Hello, ${name}.`; console.log(message); // Hello Nicholas.const count = 10; const price = 0.25; const message2 = `${count} items cost $${(count * price).toFixed(2)}.`; console.log(message2); // 10 items cost $2.50.</pre>템플릿 리터럴 또한 자바스크립트 표현식이므로 템플릿 리터럴 안에 템플릿 리터럴을 중첩할 수 있다.<pre>const name = "Nicholas"; const message = `Hello, ${ `my name is ${name}` }.`; console.log(message); // Hello, my name is Nicholas.</pre><h2 id="5c46">2.4.4 템플릿 태그</h2>템플릿 리터럴의 진정한 힘은 태그된 템플릿에서 온다. 템플릿 태그는 템플릿 리터럴을 변환하고 마지막 문자열 값을 반환한다.<pre>let count = 10; let price = 0.25; let message = passthru`${count} items cost $${(count * price).toFixed(2)}.`;</pre>첫 번째 인자 : 다음 요소를 가진 배열<ul><li id="2289">첫 번째 배열요소: 첫 번째 치환자 앞 빈 문자열 (“”) : 첫번째 배열요소는 항상 문자열이 보장된다.</li><li id="6f64">두 번째 배열요소: 첫 번째 치환자 뒤에서 두 번째 치환자 앞까지의 문자열( <code>items cost $</code>) 공백포함</li><li id="086d">세 번째 배열요소: 두 번째 치환자 뒤 문자열(“.”)</li></ul>두 번째 인자 : 치환된 값들의 배열<ul><li id="fb8e">첫 번째 배열요소: <code>count</code> 변수가 인터프리트된 값인 <code>10</code></li><li id="ba47">두 번째 배열요소: <code>(count * price).toFixed(2)</code> 가 인터프리트인 값인 <code>2.50</code></li></ul>특징<ul><li id="1362">치환자 배열요소의 수는 리터럴 배열 요소보다 항상 1작다.</li><li id="69f3">리터럴 배열의 첫 요소는 항상 문자열이 보장됨.</li></ul>이런 특징을 통해 인자로 치환자, 리터럴 요소들을 받아 템플릿 리터럴 처리를 흉내낼 수 있다.(코드는 36p 참고)템플릿 리터럴에서 원본값 사용하기<pre>const message = String.raw`Multiline\nstring`; console.log(message); // "Multiline\nstring"</pre>탬플릿 태그 함수를 직접 작성해서 String.raw 를 흉내낼 수 있다.(참고 코드는 37p)</div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

문자열과 정규표현식
책 모던 자바스크립트의 스터디 2장 준비하면서 정리한 글 공유한다.
1장 정리글을 보려면 모던 자바스크립트 1장 — 블록바인딩
2.1 더 나은 유니코드 지원
ES6 이전에 JavaScript는 문자열의 각 문자가 코드 단위(코드 유닛)라고 불리는 16개의 연속 비트로 구성되는 방법을 사용했다. 기본 문자에는 괜찮았지만 유니코드와 확장 문자 집합이 도입되면서 16비트로는 더 이상 충분하지 않게 되었다.
2.1.1 UTF-16 코드 포인트
UTF-16 코드 포인트는 UTF-16 인코딩 체계에서 문자를 나타내는 데 사용되는 숫자 값이다. 예를 들면
문자 ‘A’에 대한 UTF-16 코드 포인트는 0x0041(2진수로는 01000001, 10진수로는 65)
UTF-16에서 각 문자는 일반적으로 하나 또는 두 개의 16비트 숫자로 표시된다. 처음 65,536개 범위의 문자는 더 간단한 하나의 16비트 숫자로 표시된다.
이 범위를 기본 다국어 평면(BMP)이라고 한다. 단일 16비트 숫자로 표현할 수 있는 문자를 기본 다국어 평면이라고 한다. 이는 우리가 일반적으로 사용하는 대부분의 언어와 기호를 포함하는 “주” 문자 집합과 같다.
문자의 첫 번째 범위인 BMP(Basic Multilingual Plane)를 넘어서는 UTF-16의 문자를 보충 평면(Supplementary Plane)이라고 한다. 이러한 문자는 더 큰 코드 포인트 값을 가지므로 표시하려면 두 개 이상의 16비트 단위가 필요하다.
이를 위해 두 개의 16비트 코드 유닛으로 표현하는 서로게이트 페어를 도입하여 이 문제를 해결했다.
‘🌍’의 상위 서로게이트는 0xD83C이고 하위 서로게이트는 0xDF0D입이다. 이 두 개의 서로게이트가 함께 서로게이트 쌍을 형성한다. 합쳐지면 ‘🌍’ 문자를 나타낸다.
ES5에서는 서로게이트 페어를 포함하는 문자열을 UTF-16으로 인코딩하는 경우 예상치 못한 결과를 얻을 수 있다.
const high = "古";
console.log(high.length);        // 1 기본 다국어 평면이라 16비트로 표현됨.
const emoji = "🙏";
console.log(emoji.length);        // 2 보충 평면이라 16비트 두개로 표현되어야함.
console.log(emoji.charCodeAt(0)); // 55357
console.log(emoji.charCodeAt(1)); // 56911
한글과 관련된 이야기
예전 조합형은 한 → ㅎ ㅏ ㄴ 세가지 유니코드 포인트가 필요해서 메모리 낭비.
요즘은 완성형 한을 사용해서 하나의 유니코드 포인트로 가능.
2.1.2 codePointAt() 메서드
ES6에서는 UTF-16을 완전히 지원하기 위해 codePointAt() 메서드가 추가되었다. 이 메서드는 문자의 위치 대신 코드 유닛의 위치를 받고 하나의 정수 값을 반환한다.
codePointAt() 메서드는 0 위치에서 전체 코드 포인트를 반환한다. 다만 1위치에서는 두번째 코드 유닛을 반환한다.(charCodeAt 과 동일하다.)
console.log(emoji.codePointAt(0)); // 128591
console.log(emoji.codePointAt(1)); // 56911
문자가 몇 개의 코드 포인트로 표현되는지 확인하는 방법은 codePointAt(0)의 결과가 65535(0xFFFF)보다 큰지 확인하면 된다.
function is32Bit(c) {
 return c.codePointAt(0) > 0xFFFF;
}
console.log(is32Bit(emoji)); // true
2.1.3 String.fromCodePoint() 메서드
codePointAt() 과 반대로 코드 포인트로 문자열을 만들 수 있다.
console.log(String.fromCodePoint(128591)); // 🙏
2.1.4 nomalize() 메서드
ES6에 도입된 JavaScript의 normalize() 메서드는 다양한 형태의 유니코드 문자를 처리하는 데 도움이 되기 때문에 국제 서비스를 구현하는 데 필수적이다.
유니코드 문자는 악센트, 분음 부호 또는 결합 문자로 인해 여러 가지 표현을 가질 수 있다. 예를 들어 문자 “é”는 단일 문자로 표시되거나 “e”와 악센트 표시의 조합으로 표시될 수 있다. 이로 인해 특히 다국어 응용 프로그램에서 문자열을 비교하거나 처리할 때 불일치가 발생할 수 있다.
normalize() 메서드를 사용하면 문자열을 표준화된 형식으로 변환하여 유니코드 문자가 포함된 문자열을 일관되게 처리하고 비교할 수 있다. 다양한 형식의 문자를 단일 표준 형식으로 변환하여 이를 수행한다.
간단한 예는 다음과 같다.
const str1 = 'café'; // "é" represented as a single character
const str2 = 'cafe\u0301'; // "é" represented as "e" plus combining accent
console.log(str1 === str2); // false, because the strings are not in the same form
const normalizedStr1 = str1.normalize();
const normalizedStr2 = str2.normalize();
console.log(normalizedStr1 === normalizedStr2); // true, because both strings are normalized to the same form
이 예에서 str1과 str2는 동일한 단어 ‘café’를 나타내지만 다른 유니코드 형식이다. normalize() 메소드를 사용하여 이를 정규화함으로써 일관된 비교를 위해 동일한 형식이 되도록 보장한다.
2.1.5 정규표현식의 u 플래그
정규표현식은 각 문자를 16비트 코드 유닛으로 추정한다는 것을 기억해야 한다.
정규표현식에 u 플래그가 있으면 코드 유닛이 아니라 문자를 처리하는 모드로 전환된다.
정규식 /^.$/ 은 단일 문자를 가진 모든 문자열 입력과 매칭된다.
console.log(emoji.length);       // 2
console.log(/^.$/.test(emoji));  // false
console.log(/^.$/u.test(emoji)); // true
이를 활용해 코드 포인트의 개수를 셀 수 있다.
function codePointLength(text) {
 let result = text.match(/[\s\S]/gu); // ['🙏', 'h', 'i']
 return result ? result.length : 0;
}console.log(codePointLength('🙏hi')); // 3
2.2 문자열의 다른 변경 사항
2.2.1 부분 문자열 식별을 위한 메서드
includes() 문자열의 어느 곳에서든 주어진 문자를 찾으면 true. 두 번째 인자로 검색을 시작할 인덱스를 받는다. 있으면 해당 인덱스 부터 매칭을 시작.
startsWith() 문자열의 시작점에서 주어진 문자를 찾으면 true. 두 번째 인자로 검색을 시작할 인덱스를 받는다. 있으면 해당 인덱스 부터 매칭을 시작.
endsWith() 문자열의 끝에서 주어진 문자를 찾으면 true. 두 번째 인자로 검색을 시작할 인덱스를 받는다. 있으면 문자열의 길이에서 인덱스를 뺀 위치부터 매칭을 시작한다.
각 메서드는 검색할 문자를 필수 인자로, 검색을 시작할 인덱스를 선택적인 인자로 받는다.
2.2.2 repeat() 메서드
원본 문자열을 명시한 횟수만큼 반복하여 새로운 문자열을 반환한다.
console.log("hello".repeat(2)); // hellohello
// 코드 포매팅 유틸리티에서 유용하게 사용할 수 있다.
const indent = " ".repeat(4);
const indentLevel = 0;
// repeat(3.5) -> repeat(3)
2.3 정규 표현식의 변경사항
2.3.1 정규 표현식의 y 플래그
ES6에서 표준화된 y 플래그는 정규 표현식 검색의 sticky 프로퍼티에 영향을 준다.
sticky 프로퍼티는 문자열에서 정규 표현식의 lastIndex 프로퍼티로 명시된 위치의 문자에서 매칭을 시작하는 검색을 말한다.
y 플래그는 연산이 수행될 때마다 마지막 매칭 후 다음 문자의 인덱스를 lastIndex 에 저장한다. 매칭되는 것이 없다면 0으로 설정한다.
// Example 1: Using the y flag
const regex = /cat/y; // y flag indicates sticky behavior
// Matching from index 0
console.log(regex.exec('The cat is cute')); // null, because 'cat' is not at index 0
// Matching from index 4
regex.lastIndex = 4; // Set the lastIndex to 4
console.log(regex.exec('The cat is cute')); // ["cat"], because 'cat' starts at index 4
// Moved lastIndex
console.log(regex.lastIndex); // 7
// Example 2: Using the sticky property
const stickyRegex = /dog/y;
// Check if the regex is sticky
console.log(stickyRegex.sticky); // true, because the y flag is set
lastIndex 프로퍼티는 exec(), test() 와 같은 정규 표현식 객체에 존재하는 메서드를 호출할 때만 영향을 받는다. match() 같은 문자열 메서드는 y 플래그를 전달받더라도 sticky 처럼 동작하지 않는다.
2.3.2 정규 표현식 복사하기
const re1 = /ab/i;
const re2 = new RegExp(re1); // r1의 사본
const re3 = new RegExp(re1, "g"); // 플래그 변경. ES5 에서는 에러.
2.3.3 flags 프로퍼티
ES5에서는 source 프로퍼티로 정규 표현식 텍스트를 얻을 수 있었지만, 플래그 문자열을 얻기 위해서는 toString()의 결과를 파싱해야 했다.
ES6에서는 flags 프로퍼티를 추가하여 더 쉽게 플래그를 얻을 수 있도록 했다.
const re = /ab/g;
console.log(re.source); // ab
console.log(re.flags);  // g
2.4 템플릿 리터럴
ES6의 템플릿 리터럴은 개발자가 더 복잡한 문제를 해결할 수 있도록 보다 안전한 방법으로 콘텐츠를 처리하는 도메인 특화 언어(DSL)을 만드는 문법을 제공한다.
ES5와 이전 버전에서 부족했던 다음 특징에 대한 해결책이다.
멀티라인 문자열의 공식적인 개념
변수 값을 문자열 일부분으로 대체하는 능력
HTML안에 안전하게 삽입될 수 있도록 문자열을 변경하는 능력.
2.4.1 기본 문법
백틱(`)으로 구분
const message = `Hello world`;
console.log(message); // Hello world
const message2 = `\`Hello\` world`;
console.log(message2); // `Hello` world
도메인 특화언어(DSL)은 뭐고 템플릿 리터럴과 어떤 상관?
DSL은 도메인 특정 언어를 의미. 특정 목적을 위해 만든 비밀 코드 언어라고 생각하면됨. 템플릿 리터럴을 사용하면 JavaScript 내에서 이러한 특수 언어를 쉽게 생성하여 특정 작업을 해결할 수 있다. 이는 특정 종류의 정보를 보다 효율적으로 이해하고 처리하는 데 도움이 되는 비밀 디코더 링을 갖는 것과 같다.
GPT가 제시한 예제
// 플레이어가 수수께끼를 풀어야 하는 게임을 작성한다고 가정해 보겠습니다. 
// 수수께끼와 그 해결책을 나타내기 위해 템플릿 리터럴을 사용하여 DSL을 만들 수 있습니다. 
// 이 DSL을 사용하면 게임 코드 내에서 수수께끼를 더 쉽게 관리하고 처리할 수 있습니다.
// DSL function to represent a riddle
function createRiddle(question, answer) {
    return `
        Question: ${question}
        Answer: ${answer}
    `;
}
// Create a riddle using the DSL
const riddle1 = createRiddle("What has keys but can't open locks?", "A piano");
console.log(riddle1);
// 이 예에서 createRiddle 함수는 템플릿 리터럴을 사용하여 수수께끼를 나타내는 문자열을 생성합니다.
// 이 DSL을 사용하면 게임 코드에서 수수께끼를 쉽게 만들고 관리할 수 있습니다. 
// 이는 게임 내에서 수수께끼를 처리하기 위한 특별한 언어를 갖는 것과 같으며, 코드를 더욱 체계화하고 이해하기 쉽게 만듭니다.
2.4.2 멀티라인 문자열
ES6 이전에는 멀티라인 문자열을 구현하려면 실용적이거나 편리하지 않았음.
ES6에서는
const message = `Multiline
string`;
console.log(message); // "Multiline
                      // string"
백틱 내의 모든 공백은 문자열이다.
const message = `Multiline
                 string`;
console.log(message); // "Multiline
                      //                  string"
백틱 안에서 개행을 나타내는 \n 을 사용할 수 있다.
2.4.3 치환자 만들기
템플릿 리터럴과 문자열의 실질적인 차이는 템플릿 리터럴 치환자에 있다. 치환자는 템플릿 리터럴 안의 모든 유효한 자바스크립트 표현식을 허용하고 그 결과를 문자열 일부로 치환해서 출력해준다.
const name = "Nicholas";
const message = `Hello, ${name}.`;
console.log(message); // Hello Nicholas.
const count = 10;
const price = 0.25;
const message2 = `${count} items cost $${(count * price).toFixed(2)}.`;
console.log(message2); // 10 items cost $2.50.
템플릿 리터럴 또한 자바스크립트 표현식이므로 템플릿 리터럴 안에 템플릿 리터럴을 중첩할 수 있다.
const name = "Nicholas";
const message = `Hello, ${
  `my name is ${name}`
}.`;
console.log(message); // Hello, my name is Nicholas.
2.4.4 템플릿 태그
템플릿 리터럴의 진정한 힘은 태그된 템플릿에서 온다. 템플릿 태그는 템플릿 리터럴을 변환하고 마지막 문자열 값을 반환한다.
let count = 10;
let price = 0.25;
let message = passthru`${count} items cost $${(count * price).toFixed(2)}.`;
첫 번째 인자 : 다음 요소를 가진 배열
첫 번째 배열요소: 첫 번째 치환자 앞 빈 문자열 (“”) : 첫번째 배열요소는 항상 문자열이 보장된다.
두 번째 배열요소: 첫 번째 치환자 뒤에서 두 번째 치환자 앞까지의 문자열( items cost $) 공백포함
세 번째 배열요소: 두 번째 치환자 뒤 문자열(“.”)
두 번째 인자 : 치환된 값들의 배열
첫 번째 배열요소: count 변수가 인터프리트된 값인 10
두 번째 배열요소: (count * price).toFixed(2) 가 인터프리트인 값인 2.50
특징
치환자 배열요소의 수는 리터럴 배열 요소보다 항상 1작다.
리터럴 배열의 첫 요소는 항상 문자열이 보장됨.
이런 특징을 통해 인자로 치환자, 리터럴 요소들을 받아 템플릿 리터럴 처리를 흉내낼 수 있다.(코드는 36p 참고)
템플릿 리터럴에서 원본값 사용하기
const message = String.raw`Multiline\nstring`;
console.log(message); // "Multiline\nstring"
탬플릿 태그 함수를 직접 작성해서 String.raw 를 흉내낼 수 있다.(참고 코드는 37p)
모던 자바스크립트 1장 — 블록바인딩

모던자바스크립트 스터디 2장

댓글