01. at()
"문자열".at(위치값)
- 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다.
- 대소문자를 구별합니다.
- 문자열의 길이보다 큰 인덱스를 지정하면 undefined를 반환합니다.
- 음수인 경우 문자열의 오른쪽에서부터 인덱스를 셉니다.
{
"javascript reference".at() //j
"javascript reference".at(0) //j
"javascript reference".at(1) //a
"javascript reference".at(2) //v
"javascript reference".at(3) //a
"javascript reference".at(4) //s
"javascript reference".at(5) //c
"javascript reference".at(-1) //e
"javascript reference".at(-2) //c
"javascript reference".at(-3) //n
"javascript reference".at(-4) //e
"javascript reference".at(-5) //r
"javascript reference".at(100) // undefined
}
02. charAt()
"문자열".charAt(위치값)
- 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 단일문자를 반환합니다.
- 인자 값을 생략하면 기본값 0으로 설정됩니다.
- 만약 인덱스가 문자열 길이보다 큰 경우는 빈 문자열을 반환합니다.
{
"javascript reference".charAt() //j
"javascript reference".charAt(0) //j
"javascript reference".charAt(1) //a
"javascript reference".charAt(2) //v
"javascript reference".charAt(10) //빈문자열
"javascript reference".charAt(30) //NaN
}
03. charCodeAt()
"문자열".charCodeAt(위치값)
- 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 정수 값을 반환합니다.
- 인자 값을 생략하면 기본값은 0으로 설정됩니다.
- 만약 인덱스가 문자열 길이보다 큰 경우는 빈 문자열을 반환합니다.
{
"javascript reference".charCodeAt() //106
"javascript reference".charCodeAt(0) //106
"javascript reference".charCodeAt(1) //97
"javascript reference".charCodeAt(2) //118
"javascript reference".charCodeAt(-1) // NaN
"javascript reference".charCodeAt(22) // NaN
}
😎 UTF-16 코드 유닛
UTF-16 코드 유닛은 유니코드 문자를 나타내기 위한 인코딩 방식 중 하나입니다. UTF-16에서는 하나의 유니코드 문자를 나타내기 위해 두 개의 16비트 코드 유닛을 사용합니다. 따라서 UTF-16 코드 유닛은 16비트 또는 2바이트 크기의 값으로, 0부터 0xFFFF(65535)까지의 값을 가질 수 있습니다. 예를 들어, 문자 'A'는 유니코드에서 U+0041로 정의되어 있습니다. 이를 UTF-16으로 인코딩하면 두 개의 16비트 코드 유닛으로 변환됩니다. 첫 번째 코드 유닛은 상위 8비트가 0이고 하위 8비트가 65인 0x0041이 됩니다. 두 번째 코드 유닛은 상위 8비트가 0이고 하위 8비트가 0인 0x0000이 됩니다. 따라서 'A'를 나타내는 UTF-16 코드 유닛의 값은 [0x0041, 0x0000]입니다.
04. codePointAt(위치값)
"문자열".codePointAt("숫자")
- 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 포인트 정수 값을 반환합니다.
- 문자열에서 지정된 위치에 있는 UTF-16 코드 유닛의 값을 반환합니다.
- 해당 위치에서 유효한 코드 포인트가 없는 경우 undefined를 반환합니다.
{
"javascript reference".codePointAt(0) //106
"javascript reference".codePointAt(4) //97
"javascript reference".codePointAt(8) //118
"javascript reference".codePointAt(11) //97
"javascript reference".codePointAt(14) //115
"javascript reference".codePointAt(18) //99
"javascript reference".codePointAt(-1) //101
"javascript reference".codePointAt(30) //undefined
}
05. concat()
"문자열".concat("문자열", "문자열")
- 매개변수로 전달된 문자열을 받어, 결합된 새로운 문자열을 반환합니다.
- 기존의 문자열을 변경하지 않습니다.
{
'javascript'.concat('reference') //javascriptreference
'javascript'.concat(' ', 'reference') //javascript reference
'javascript'.concat(', ', 'reference') //javascript, reference
'javascript'.concat('+', 'reference') //javascript+reference
'javascript'.concat(' ', 'reference', ' ', 'seolhee') //javascript reference seolhee
'javascript'.concat(' ', ['refer','ence'], 'seolhee') //javascript [refer,ence] seolhee
}
06. includes()
"문자열".includes(검색값, [위치값])
- 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.
- 대소문자를 구별합니다.
{
"javascript reference".includes("javascript"); //true
"javascript reference".includes("j"); //true
"javascript reference".includes("J"); //false
"javascript reference".includes("a"); //true
"javascript reference".includes("reference"); //true
"javascript reference".includes("reference", 11); //true
"javascript reference".includes("reference", 12); //false
}
07. indexOf()
"문자열".indexOf(검색값, [위치값])
- 문자열을 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
- 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
- 대소문자를 구별합니다.
{
"javascript reference".indexOf("javascript"); // 0
"javascript reference".indexOf("javascripts"); // -1
"javascript reference".indexOf("j"); // 0
"javascript reference".indexOf("J"); // -1
"javascript reference".indexOf("a"); // 1
"javascript reference".indexOf("ja"); // 0
"javascript reference".indexOf("jv"); // -1
"javascript reference".indexOf("reference") // 11
"javascript reference".indexOf("r"); // 6
"javascript reference".indexOf("re"); // 11
"javascript reference".indexOf("javascript", 0); // 0
"javascript reference".indexOf("javascript", 1); // -1
"javascript reference".indexOf("reference", 0); // 11
"javascript reference".indexOf("reference", 11); // 11
"javascript reference".indexOf("reference", 12); // -1
"javascript reference".indexOf("r", 7); // 11
"javascript reference".indexOf("r", 12); // 15
}
08. lastIndexOf()
"문자열".lastIndexOf(검색값, [위치값])
- 문자열을 역순으로 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
- 문자열을 역순으로 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
- 대소문자를 구별합니다.
{
"javascript reference".lastIndexOf("javascript"); //0
"javascript reference".lastIndexOf("javascripts"); //-1
"javascript reference".lastIndexOf("j"); //0
"javascript reference".lastIndexOf("a"); //3
"javascript reference".lastIndexOf("jv"); //-1
"javascript reference".lastIndexOf("reference"); //11
"javascript reference".lastIndexOf("r"); //15
}
09. localeCompare()
"문자열".localeCompare("문자열")
- 문자열과 문자열을 비교하여, 수치(음수, 양수, 0)을 반환합니다.
- 문자열을 다른 문자열과 비교하여 정렬 순서를 결정하는 메서드입니다.
- 현재 문자열과 인자로 전달된 문자열을 사전식 순서로 비교하여 결과를 반환합니다.
{
const str1 = "apple";
const str2 = "banana";
const str3 = "orange";
console.log(str1.localeCompare(str2)); // -1
console.log(str2.localeCompare(str1)); // 1
console.log(str1.localeCompare(str3)); // 1
console.log(str1.localeCompare("apple")); // 0
}
😎 설명
str1에 "apple"을, str2에 "banana"를, str3에 "orange"를 각각 할당한 뒤, localeCompare() 메서드를 이용하여 문자열을 비교하였습니다. str1과 str2는 "apple"이 "banana"보다 앞에 위치하므로 -1이, str2와 str1은 "banana"가 "apple"보다 뒤에 위치하므로 1이, str1과 str3은 "apple"이 "orange"보다 앞에 위치하므로 1이 반환됩니다. 마지막으로, str1과 "apple"은 동일한 문자열이므로 0이 반환됩니다.
10. match()
"문자열".match(검색값)
"문자열".match(정규식표현)
"문자열".match(정규식표현)
- 문자열(정규식을) 검색하고, 문자값(배열)을 반환합니다.
- 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 null을 반환합니다.
- 대소문자를 구별합니다.
- match() 메서드는 문자값(배열)을 반환하고, search() 메서드는 위치값(숫자)를 반환하는 것이 다릅니다.
{
"javascript reference".match("javascript"); //"javascript"
"javascript reference".match("reference"); //"reference"
"javascript reference".match("r"); //"r"
"javascript reference".match("R"); //null
"javascript reference".match(/reference/); //reference
"javascript reference".match(/Reference/); //null
"javascript reference".match(/Reference/i); //reference
"javascript reference".match(/Reference/g); //reference
"javascript reference".match(/r/); //r
"javascript reference".match(/r/g); //r r r
"javascript reference".match(/w/g); //null
}
12. normalize()
"문자열(유니코드 문자열)".normalize("정규화")
- 주어진 문자열을 정규화된 형태로 반환합니다.
- 주어진 값이 문자열이 아닐 경우에는 우선 문자열로 변환 후 정규화합니다.
- 정규화 방식은 'NFC', 'NFD', 'NFKC', 'NFKD' 입니다.
- 만약 생략되거나 undefined일 경우 'NFC'를 사용합니다.
{
// 문자열
"javascript".normalize("NFC"); // javascript
"javascript".normalize("NFD"); // javascript
"javascript".normalize("NFKC"); // javascript
"javascript".normalize("NFKD"); // javascript
"reference".normalize("NFC"); // reference
"reference".normalize("NFD"); // reference
"reference".normalize("NFKC"); // reference
"reference".normalize("NFKD"); // reference
// 유니코드 문자열
"\u0041\u0308".normalize("NFC"); // 'Ä'
"\u0041\u0308".normalize("NFD"); // 'Ä'
"\u0041\u0308".normalize("NFKC"); // 'Ä'
"\u0041\u0308".normalize("NFKD"); // 'Ä'
}
😎 4가지 정규화 방식
"NFC" (Normalization Form Canonical Composition): 문자열을 정규화하여 완전 분해 된 문자를 조합하고, 결과적으로 새로운 문자열을 생성합니다.
"NFD" (Normalization Form Canonical Decomposition): 문자열을 정규화하여 조합된 문자를 분해하고, 결과적으로 새로운 문자열을 생성합니다.
"NFKC" (Normalization Form Compatibility Composition): "NFC"와 유사하지만, 호환성이 있는 문자를 다른 문자와 결합합니다.
"NFKD" (Normalization Form Compatibility Decomposition): "NFD"와 유사하지만, 호환성이 있는 문자를 다른 문자로 분해합니다.
13. padEnd()
"문자열".padEnd(문자열의 길이, [선택적 매개변수])
- 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다.
- 채워넣기는 대상 문자열의 끝(우측)부터 적용됩니다.
- 매개변수가 생략된 경우, 기본값으로 공백 문자열(' ')이 사용됩니다.
{
"javascript".padEnd(5); // javascript
"javascript".padEnd(3); // javascript
"javascript".padEnd(13, '-'); // javascript---
"javascript".padEnd(13, '^'); // javascript^^^
"javascript".padEnd(11, '!'); // javascript!
"javascript".padEnd(14, 'love'); // javascriptlove
}
14. padStart()
"문자열".padStart(문자열이의 길이, [선택적 매개변수])
- 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다.
- 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.
{
"javascript".padStart(5); //javascript
"javascript".padStart(3); //javascript
"javascript".padStart(13, '-'); //---javascript
"javascript".padStart(13, '^'); //^^^javascript
"javascript".padStart(11, '!'); //!javascript
"javascript".padStart(14, 'love'); //lovejavascript
}
15. repeat()
"문자열".repeat(반복할 횟수)
- 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다.
- 전달된 매개변수는 0보다 큰 정수이어야 합니다.
- 만약 0보다 작거나 0이면 RangeError 예외가 발생합니다.
{
"javascript".repeat(3); // javascriptjavascriptjavascript
"java".repeat(5); // javajavajavajavajava
"script".repeat(3); // scriptscriptscript
"reference".repeat(3); // referencereferencereference
}
18. search()
"문자열".search(검색값)
"문자열".search(정규식표현)
"문자열".search(정규식표현)
- 문자열(정규식을) 검색하고, 위치값(숫자)을 반환합니다.
- 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
- 대소문자를 구별합니다.
{
"javascript reference".search("javascript"); //0
"javascript reference".search("reference"); //11
"javascript reference".search("r"); //6
"javascript reference".search("a"); //1
"javascript reference".search("jv"); //-1
"javascript reference".search("J"); //-1
"javascript reference".search(/reference/); //11 //정규식 표현을 썼음
"javascript reference".search(/Reference/); //-1
"javascript reference".search(/Reference/i); //11 //i가 소문자로 인식해줌 reference
"javascript reference".search(/[a-z]/g); //0
"자바스크립트".search(/[a-z]/g); //-1
}
19. slice()
"문자열".slice(시작위치, [끝나는 위치])
- 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열 반환합니다.
{
"javascript".slice(0); //javascript
"javascript".slice(1); //avascript
"javascript".slice(2); //vascript
"javascript".slice(0, 1); //j
"javascript".slice(1, 2); //a
"javascript".slice(0, 2); //ja
"javascript".slice(0, 3); //jav
"javascript".slice(5, 10); //cript
"javascript".slice(5, -1); //crip
"javascript".slice(5, -2); //cri
"javascript".slice(-1); //t
"javascript".slice(-2); //pt
"javascript".slice(-3); //ipt
"javascript".slice(-3, -1); //ip
"javascript".slice(-3, -2); //i
}
22. split()
"문자열".split(구분자, [제한])
- 구분자를 이용하여, 여러개의 문자열(배열)을 반환합니다.
{
"javascript".split(""); //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']
"java script".split(" "); //['java', 'script']
"java scr ipt".split(" "); //['java', 'scr', 'ipt']
"javascript".split("", 1); //['j'] //제한을 걸었음.
"javascript".split("", 2); //['j', 'a']
"javascript".split("", 3); //['j', 'a', 'v']
"java script".split(" ", 1); //['java']
"java script".split(" ", 2); //['java', 'script']
"javascript".split("j"); //['', 'avascript'] //j가 빠졌음.
"javascript".split("a"); //['j', 'v', 'script']
"javascript".split("e"); //['javascript'] //e가 없어서 다 나옴.
"java/scr/ipt".split("/"); //['java', 'scr', 'ipt']
"java&scr!ipt".split("&"); //['java', 'scr!ipt']
"java&scr!ipt".split("!"); //['java&scr', 'ipt']
"java&scr!ipt".split(/&|\!/); //['java', 'scr', 'ipt'] //정규식표현
"javascript".split(""); //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']
"java&scr!ipt".split("").join(); //j,a,v,a,s,c,r,i,p,t
"javascript".split("").join("*"); //j*a*v*a*s*c*r*i*p*t
"javascript".split("").reverse().join(); //t,p,i,r,c,s,a,v,a,j
"javascript".split("").reverse().join("/"); //t/p/i/r/c/s/a/v/a/j
}
30. trim()
"문자열".trim()
- 문자열의 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
{
"javascript".trim(""); //javascript
"javascript ".trim(""); //javascript
" javascript ".trim(""); //javascript
" java script ".trim(""); //java script
}
31. trimEnd()
"문자열".trimEnd()
- 메서드는 문자열의 뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
{
"javascript ".trimEnd(""); //javascript
}
32. trimStart()
"문자열".trimStart()
- 메서드는 문자열의 앞 공백을 제거하고, 새로운 문자열을 반환합니다.
{
" javascript".trimStart(""); //javascript
}