01. at()
"문자열".at(위치값)
- 배열과 문자열에서 사용가능 하지만 주로 배열에서 사용 합니다.
- 배열(Array) 객체의 메서드 중 하나로, 특정 인덱스(index)에 해당하는 요소(element)를 반환합니다.
- 배열의 인덱스가 유효하지 않을 경우 undefined를 반환하며, 배열의 범위를 초과하는 인덱스를 사용하려고 하면 RangeError를 발생시킵니다.
{
"javascript refercence".at(0); //"j"
"javascript refercence".at(1); //"a"
"javascript refercence".at(10); //" "
"javascript refercence".at(-1); //"e"
"javascript refercence".at(-12); //"t"
"javascript refercence".at(30); //undefined
}
02. charAt()
"문자열".charAt(위치값)
- 문자열(String) 객체의 메서드 중 하나로, 특정 인덱스(index)에 해당하는 문자(character)를 반환합니다.
- 주어진 인덱스의 문자를 반환합니다. 인덱스가 유효하지 않은 경우, 즉 문자열의 길이를 벗어나는 인덱스를 사용하는 경우, 빈 문자열('')을 반환합니다.
{
"javascript refercence".charAt(0); //"j"
"javascript refercence".charAt(1); //"a"
"javascript refercence".charAt(10); //" "
"javascript refercence".charAt(-1); //"" //-를 붙이면 빈문자열이나옴
"javascript refercence".charAt(-12); //""
"javascript refercence".charAt(30); //""
}
03. charCodeAt()
"문자열".charCodeAt(위치값)
- 특정 인덱스(index)에 해당하는 문자(character)의 코드 유닛값(Unicode code point)을 반환합니다.
- 코드 유닛값(Unicode code point)이란 프로그램에서 문자를 인식하기 위한 유니코드(Unicode) 인코딩 방식 중 하나입니다.
- 인덱스가 문자열의 범위를 벗어나는 경우 NaN을 반환합니다
{
"javascript refercence".charCodeAt(0); //106
"javascript refercence".charCodeAt(1); //97
"javascript refercence".charCodeAt(10); //32
"javascript refercence".charCodeAt(-1); //NaN //-를 붙이면 NaN이나옴
"javascript refercence".charCodeAt(-12); //NaN
"javascript refercence".charCodeAt(30); //NaN
}
04. codePointAt()
"문자열".codePointAt(위치값)
- 특정 위치(index)에 있는 문자(character)의 코드 포인트(code point)를 반환합니다.
- 코드 포인트란 유니코드(Unicode)에서 문자를 나타내기 위해 할당된 고유한 값을 의미합니다. 이 값은 UTF-16에서 2바이트 이상의 문자를 표현할 때에는 여러 개의 유니코드 코드 포인트를 결합하여 만들어집니다.
- 인덱스가 문자열의 범위를 벗어나는 경우 undefined 을 반환합니다
{
"javascript refercence".codePointAt(0); //106
"javascript refercence".codePointAt(1); //97
"javascript refercence".codePointAt(10); //32
"javascript refercence".codePointAt(-1); //undefined //-를 붙이면 undefined가나옴
"javascript refercence".codePointAt(-12); //undefined
"javascript refercence".codePointAt(30); //undefined
}
05. concat()
배열1.concat(배열2)
- 두 개 이상의 배열을 연결(concatenate)하여 새로운 배열을 만듭니다.
- 기존의 배열에 새로운 요소를 추가하는 push() 메서드와는 달리, 두 개 이상의 배열을 연결하여 하나의 배열로 만드는 것이 목적입니다. 이 메서드는 인자로 전달한 배열들을 연결하여 새로운 배열을 반환하며, 원본 배열은 변경되지 않습니다.
{
const arr1 = ["javascript"];
const arr2 = ["refercence"];
const arr3 = arr1.concat(arr2);
console.log(arr3); //['javascript', 'refercence']
const arr1 = [1,2,3];
const arr2 = [1,2,3,4];
const arr3 = arr1.concat(arr2);
console.log(arr3); //[1, 2, 3, 1, 2, 3, 4]
const arr1 = [1,2,3];
const arr2 = ["javascript"];
const arr3 = arr1.concat(arr2);
console.log(arr3); //[1, 2, 3, 'javascript']
}
06. includes()
"문자열".includes(검색값, [위치값])
- 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.
- 대소문자를 구별합니다.
{
"javascript refercence".includes("javascript"); //true
"javascript refercence".includes("j"); //true
"javascript refercence".includes("J"); //flase
"javascript refercence".includes("a"); //true
"javascript refercence".includes("refercence"); //true
"javascript refercence".includes("refercence", 11); //true
"javascript refercence".includes("refercence", 12); //false
}
07. indexOf()
"문자열".indexOf(검색값, [위치값])
- 문자열을 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
- 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
- 대소문자를 구별합니다.
{
"javascript refercence".indexOf("javascript"); //0
"javascript refercence".indexOf("javascripts"); //-1
"javascript refercence".indexOf("j"); //0
"javascript refercence".indexOf("J"); //-1
"javascript refercence".indexOf("ja"); //0
"javascript refercence".indexOf("jv"); //-1
"javascript refercence".indexOf("refercence"); //11
"javascript refercence".indexOf("r"); //6
"javascript refercence".indexOf("re"); //11
"javascript refercence".indexOf("javascript", 0); //0
"javascript refercence".indexOf("javascript", 1); //-1
"javascript refercence".indexOf("refercence", 0); //11
"javascript refercence".indexOf("refercence", 11); //11
"javascript refercence".indexOf("refercence", 12); //-1
"javascript refercence".indexOf("r", 7); //11
"javascript refercence".indexOf("r", 12); //15
}
08. lastIndexOf()
"문자열".lastIndexOf(검색값, [위치값])
- 문자열을 역순으로 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
- 문자열을 역순으로 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
- 대소문자를 구별합니다.
{
"javascript refercence".lastIndexOf("javascript"); //0
"javascript refercence".lastIndexOf("javascripts"); //-1
"javascript refercence".lastIndexOf("j"); //0
"javascript refercence".lastIndexOf("a"); //3
"javascript refercence".lastIndexOf("jv"); //-1
"javascript refercence".lastIndexOf("refercence"); //11
"javascript refercence".lastIndexOf("r"); //15
}
09. localeCompare()
"문자열1".localeCompare("문자열2")
- 두 개의 문자열을 비교하여 현재 로캘(locale)에서의 정렬 순서를 기준으로 결과를 반환합니다.
- 인자로 전달된 문자열과 메서드를 호출한 문자열을 비교합니다. 이때, 비교는 현재 로캘에서의 문자열 정렬 순서를 기준으로 수행됩니다. 즉, 로캘에 따라 문자열의 정렬 순서가 달라질 수 있습니다.
- 만약 두 문자열이 동일하다면, 0을 반환합니다.
- 메서드를 호출한 문자열이 인자로 전달된 문자열보다 로캘에서 앞선다면, 음수를 반환합니다.
- 메서드를 호출한 문자열이 인자로 전달된 문자열보다 로캘에서 뒤에 있다면, 양수를 반환합니다.
{
const str1 = "javascript";
const str2 = "refercence";
const str3 = str1.localeCompare(str2);
console.log(str3); //-1
const str1 = "javascript";
const str2 = "refercence";
console.log(str2.localeCompare(str1)); //1
const str1 = "javascript";
const str2 = "refercence";
const str3 = str1.localeCompare(str1);
console.log(str3); //0
console.log("javascript".localeCompare("refercence")); //-1
console.log("refercence".localeCompare("javascript")); //1
console.log("javascript".localeCompare("javascript")); //0
}
10. match()
"문자열".match(검색값)
"문자열".match(정규식표현)
"문자열".match(정규식표현)
- 문자열(정규식)을 검색하고, 문자값(배열)을 반환합니다.
- 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 null을 반환합니다.
- 대소문자를 구별합니다.
- match() 메서드는 문자값(배열)을 반환하고, search() 메서드는 위치값(숫자)를 반환하는 것이 다릅니다.
{
"javascript refercence".match("javascript"); //"javascript"
"javascript refercence".match("refercence"); //"refercence"
"javascript refercence".match("r"); //"r"
"javascript refercence".match("R"); //null
"javascript refercence".match(/refercence/); // refercence
"javascript refercence".match(/Refercence/); // null
"javascript refercence".match(/Refercence/i); // refercence
"javascript refercence".match(/Refercence/g); // null
"javascript refercence".match(/r/); // r
"javascript refercence".match(/r/g); // r r r
"javascript refercence".match(/w/g); // null
"javascript rfercence".match(/R/ig); // r r r
}
12. normalize()
"문자열1"normalize() === "문자열2".normalize()
- 문자열에서 발생하는 Unicode 정규화 문제를 해결하기 위해 사용됩니다.
- Unicode는 문자를 표현하는 표준 방식이지만, 문자를 표현하는 방법이 여러 가지로 나뉘어져 있습니다. 이러한 다양한 표현 방식으로 인해 문자열 비교, 검색, 정렬 등의 작업이 원하는 결과를 내지 못할 수 있습니다. 이때, normalize() 메서드를 사용하여 문자열을 표준화하여 사용할 수 있습니다.
- "ä"와 "ä"는 눈으로 보면 같은 문자이지만, Unicode에서는 다른 문자입니다. "ä"와 "ä"가 포함된 문자열을 "NFC" 방식으로 정규화하면, 두 문자열이 동일한 값으로 정규화됩니다.
- Unicode 정규화 방식을 나타내는 4가지 값을 사용할 수 있습니다.
""NFC": Canonical Decomposition followed by Canonical Composition
"NFD": Canonical Decomposition
"NFKC": Compatibility Decomposition followed by Canonical Composition
"NFKD": Compatibility Decomposition
{
const str1 = "cafe\u0301";
const str2 = "caf\u00e9";
console.log(str1 === str2); // false
console.log(str1.normalize() === str2.normalize()); // true
const str = "안녕하세요";
const strDecomposed = str.normalize("NFD");
const strComposed = str.normalize("NFC");
console.log(strDecomposed); // "안녕하세요"
console.log(strComposed); // "안녕하세요"
console.log(strDecomposed === strComposed); // false
}
13. padEnd()
"문자열".padEnd(새로운문자열길이설정,"끝부분에 추가 할 문자열")
- 메서드는 문자열의 끝에 다른 문자열을 추가하여 지정한 길이만큼의 새로운 문자열을 생성합니다.
- 만약 추가할 문자열의 길이가 지정한 길이에 도달하면 추가하지 않습니다.
- 주로 출력할 문자열의 길이를 일정하게 유지해야 할 때 사용합니다.
{
const str = "javascript";
console.log(str.padEnd(21, " refercence")); // "javascript refercence"
console.log(str.padEnd(15, " refercence")); // "javascript refe"
console.log(str.padEnd(5, ".")); // "javascript"
console.log(str.padEnd(15)); // "javascript "
console.log(str.padEnd(15, ".")); // "javascript....."
}
14. padStart()
"문자열".padStart(새로운문자열길이설정,"시작부분에 추가 할 문자열")
- 문자열의 시작 부분에 다른 문자열을 추가하여 지정한 길이만큼의 새로운 문자열을 생성합니다.
- 만약 추가할 문자열의 길이가 지정한 길이에 도달하면 추가하지 않습니다.
- 주로 출력할 문자열의 길이를 일정하게 유지해야 할 때 사용합니다.
{
const str = "javascript";
console.log(str.padStart(21, " refercence")); // " refercencejavascript"
console.log(str.padStart(15, " refercence")); // " refejavascript"
console.log(str.padStart(5, ".")); // "javascript"
console.log(str.padStart(15)); // " javascript"
console.log(str.padStart(15, ".")); // ".....javascript"
}
15. repeat()
"문자열".repeat(반복횟수)
- 문자열을 지정한 횟수만큼 반복하여 새로운 문자열을 반환합니다.
- 양의 정수입니다. 0과 음수는 RangeError 예외를 발생시킵니다.
- 0으로 설정하면 빈 문자열 ""이 생성됩니다.
{
const str = "javascript";
console.log(str.repeat(3)); // "javascriptjavascriptjavascript"
console.log(str.repeat(0)); // ""
console.log(str.repeat(-1)); // RangeError
}
18. search()
"문자열".search(검색값)
"문자열".search(정규식표현)
"문자열".search(정규식표현)
- 문자열(정규식)을 검색하고, 위치값(숫자)을 반환합니다.
- 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
- 대소문자를 구별합니다.
{
"javascript refercence".search("javascript"); //0
"javascript refercence".search("refercence"); //11
"javascript refercence".search("r"); //6
"javascript refercence".search("a"); //1
"javascript refercence".search("jv"); //-1
"javascript refercence".search("J"); //-1
"javascript refercence".search(/refercence/); //11
"javascript refercence".search(/Refercence/); //-1
"javascript refercence".search(/[a-z]/g); //0
"javascript refercence".search(/Refercence/i); //11
}
19. slice
"문자열".slice(시작위치,[끝나는 위치])
- 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열을 반환합니다.
{
"javascript".slice(); //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']
"javascript".split("a"); //['j', 'v', 'script']
"javascript".split("e"); //['javascript']
"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'] //& |\(or)!정규식표현
"javascript".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 문자열에서는 .reverse()가안되니 join이전에
"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'
" java script ".trimEnd(""); //' java script'
}
32. trimStart()
"문자열".trimStart()
- 메서드는 문자열의 앞 공백을 제거하고, 새로운 문자열을 반환합니다.
{
" javascript ".trimStart(""); //'javascript '
" java script ".trimStart(""); //'java script '
}