01. at()
"배열".at(인덱스)
at() 메서드는 정수 값을 받아, 배열에서 해당 되는 인덱스의 요소를 반환합니다.
양수와 음수 모두 설정 할 수 있으며, 음수 값의 경우 뒤에서부터 인덱스 값을 설정합니다.
주어진 인덱스에 배열이 없으면 undefined를 반환합니다.
{
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.at(0) //1
arr.at(1) //2
arr.at(2) //3
arr.at(3) //4
arr.at(4) //5
arr.at(-1) //9
arr.at(-2) //8
arr.at(-3) //7
arr.at(-4) //6
arr.at(-5) //5
}
결과 확인하기
실행되었습니다.
02. charAt()
"문자열".charAt(숫자)
charAt() 메서드는 지정한 숫자(index)의 단일 문자 값을 반환합니다.
인자 값을 생략하면 기본값 0으로 설정됩니다.
만약 인덱스가 문자열 길이보다 큰 경우는 빈 문자열을 반환합니다.
{
"javascript reference".charAt() //j
"javascript reference".charAt('0') //j
"javascript reference".charAt('1') //a
"javascript reference".charAt('2') //v
}
결과 확인하기
실행되었습니다.
03. charCodeAt()()
"문자열".charCodeAt(숫자)
charCodeAt() 메서드는 지정한 숫자(index)의 유니코드 값을 반환합니다.
인자 값을 생략하면 기본값 0으로 설정됩니다.
만약 인덱스가 문자열 길이보다 큰 경우는 빈 문자열을 반환합니다.
유니코드란 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 말합니다.
{
"javascript reference".charCodeAt() //106
"javascript reference".charCodeAt('0') //106
"javascript reference".charCodeAt('1') //97
"javascript reference".charCodeAt('2') //118
}
결과 확인하기
실행되었습니다.
04. charCodeAt()()
자열에서 지정된 인덱스에 있는 유니코드 코드 포인트를 반환합니다.
이 메소드는 이전에 사용되었던 charAt() 메소드와는 달리, 코드 포인트를 나타내는 단일 문자열 대신 코드 포인트를 나타내는 정수 값을 반환합니다.
이를 통해 21비트 이상의 문자(즉, 2바이트 이상의 문자)도 올바르게 처리할 수 있습니다.
이 메소드는 이전에 사용되었던 charAt() 메소드와는 달리, 코드 포인트를 나타내는 단일 문자열 대신 코드 포인트를 나타내는 정수 값을 반환합니다.
이를 통해 21비트 이상의 문자(즉, 2바이트 이상의 문자)도 올바르게 처리할 수 있습니다.
𠮷a 문자열을 생성하고, charCodeAt() 메소드와 charAt() 메소드를 사용하여 각 인덱스의 유니코드 값을 반환합니다.
이전에 사용되었던 charAt() 메소드는 코드 포인트의 일부를 잃어버리기 때문에 이상한 결과를 반환합니다. 그에 비해 charPointAt() 메소드는 정확한 결과를 반환합니다.
마지막으로, 마지막 인덱스에서 시작하는 경우 undefined 값을 반환합니다. 첫 번째 예제에서 마지막 코드 포인트는 두 바이트를 차지하므로, position 매개변수를 생략하면 마지막 문자를 처리하는 데 사용됩니다. 마지막 코드 포인트를 처리하려면 position 매개변수를 명시적으로 전달해야합니다.
{
const str = '𠮷a';
console.log(str.charCodeAt(0)); // 55362
console.log(str.charCodeAt(1)); // 57271
console.log(str.charAt(0)); // '�'
console.log(str.charAt(1)); // '�'
console.log(str.charAt(2)); // 'a'
console.log(str.codePointAt(0)); // 134071
console.log(str.codePointAt(1)); // 57271
console.log(str.charAt(0)); // '𠮷'
console.log(str.charAt(1)); // 'a'
console.log(str.codePointAt(2)); // 97
console.log(str.codePointAt()); // 134071
console.log(str.codePointAt(1)); // 57271
console.log(str.codePointAt(3)); // undefined
}
결과 확인하기
실행되었습니다.
05. concat()()
"문자열".concat(문자열, 문자열,....)
"배열".concat(문자열, 문자열,....)
"배열".concat(문자열, 문자열,....)
concat() 메서드는 매개변수로 전달된 문자열을 받어, 결합된 새로운 문자열을 반환합니다.
concat() 메서드는 기존의 문자열을 변경하지 않습니다.
concat() 메서드 보다 (+, +=) 연산자를 사용하는 것이 속도 및 성능이 더 좋습니다.
at(), concat(), includes(), indexOf(), lastIndexOf(), slice(), toString() 메서드는 배열(array) 또는 문자열(string)에서 둘다 사용 가능합니다.
{
const str = "javascript";
str.concat("reference"); //javascriptreference
str.concat(" ","reference"); //javascript reference
str.concat(", ","reference"); //javascript, reference
str.concat(" + ","reference"); //javascript + reference
str.concat(" ","refe"," ","rence"); //javascript refe rence
str.concat(" ", ["refer","ence"]); //javascript refer,ence
const arr = ["java", "script"];
arr.concat("reference") // ['java', 'script', 'reference']
arr.concat(" ", "reference") // ['java', 'script', ' ', 'reference']
arr.concat("refer", "ence") // ['java', 'script', 'refer', 'ence']
arr.concat(["refer", "ence"]) // ['java', 'script', 'refer', 'ence']
arr.concat("+", ["refer", "ence"]) // ['java', 'script', '+', 'refer', 'ence']
}
결과 확인하기
실행되었습니다.
06. includes()
"문자열".includes(검색값)
"문자열".includes(검색값, 위치값)
"문자열".includes(검색값, 위치값)
{
"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(검색값, [위치값])
{
"jabascript reference".indexOf("jabascript") //0
"jabascript reference".indexOf("jabascripts") //-1
"jabascript reference".indexOf("j") //0
"jabascript reference".indexOf("J") //-1
"jabascript reference".indexOf("a") //1
"jabascript reference".indexOf("ja") //0
"jabascript reference".indexOf("jv") //-1
"jabascript reference".indexOf("reference") //11
"jabascript reference".indexOf("r") //6
"jabascript reference".indexOf("re") //11
"jabascript reference".indexOf("") //11
"jabascript reference".indexOf("javascript, 0") //0
"jabascript reference".indexOf("javascript, 1") //-1
"jabascript reference".indexOf("reference, 0") //11
"jabascript reference".indexOf("reference, 11") //11
"jabascript reference".indexOf("reference, 12") //-1
"jabascript reference".indexOf("r, 7") //11
"jabascript reference".indexOf("r, 12") //15
console.log("jabascript reference".indexOf("ja")); //0
}
결과 확인하기
실행되었습니다.
08. lastIndexOf()
"문자열".indexOf(검색값, [위치값])
- 문자열을 검색하여, 주어진 값과 일치하는 첫 번쨰 위치값(index)을 반환합니다.
- 문자열을 검색하여, 주어진 값과 일치하는 것이 없으면 -1을 반환합니다.
- 대소문자를 구별합니다.
{
"jabascript reference".indexOf("jabascript") //0
"jabascript reference".indexOf("jabascripts") //-1
"jabascript reference".indexOf("j") //0
"jabascript reference".indexOf("J") //-1
"jabascript reference".indexOf("a") //1
"jabascript reference".indexOf("ja") //0
"jabascript reference".indexOf("jv") //-1
"jabascript reference".indexOf("reference") //11
"jabascript reference".indexOf("r") //6
"jabascript reference".indexOf("re") //11
"jabascript reference".indexOf("") //11
"jabascript reference".indexOf("javascript, 0") //0
"jabascript reference".indexOf("javascript, 1") //-1
"jabascript reference".indexOf("reference, 0") //11
"jabascript reference".indexOf("reference, 11") //11
"jabascript reference".indexOf("reference, 12") //-1
"jabascript reference".indexOf("r, 7") //11
"jabascript reference".indexOf("r, 12") //15
console.log("jabascript reference".indexOf("ja")); //0
}
결과 확인하기
실행되었습니다.
09. localeCompare()
두 개의 문자열을 비교하여 정렬 순서를 확인하는 데 사용됩니다. 이 메소드는 기본적으로 유니코드 코드 포인트를 사용하여 문자열을 비교하지만, locale 매개 변수를 통해 로케일 정보를 전달하여 지역화된 비교를 수행할 수도 있습니다.
localeCompare() 메소드는 다음과 같은 세 가지 값 중 하나를 반환합니다.
0보다 작은 값: 첫 번째 문자열이 두 번째 문자열보다 앞섭니다.
0: 두 문자열이 동일한 순서입니다.
0보다 큰 값: 첫 번째 문자열이 두 번째 문자열보다 뒤에 있습니다.
localeCompare() 메소드는 다음과 같은 세 가지 값 중 하나를 반환합니다.
0보다 작은 값: 첫 번째 문자열이 두 번째 문자열보다 앞섭니다.
0: 두 문자열이 동일한 순서입니다.
0보다 큰 값: 첫 번째 문자열이 두 번째 문자열보다 뒤에 있습니다.
- localeCompare() 메소드를 사용하여 세 개의 문자열을 비교합니다. 결과값은 첫 번째 문자열(str1)이 두 번째 문자열(str2)보다 앞에 있으므로 -1이 출력됩니다.
- 두 번째 문자열(str2)이 세 번째 문자열(str3)보다 앞에 있으므로 -1이 출력됩니다. 마지막으로, 첫 번째 문자열(str1)과 첫 번째 문자열(str1)은 동일한 문자열이므로 0이 출력됩니다.
{
const str1 = 'apple';
const str2 = 'banana';
const str3 = 'orange';
console.log(str1.localeCompare(str2)); // -1
console.log(str2.localeCompare(str1)); // 1
console.log(str2.localeCompare(str3)); // -1
console.log(str3.localeCompare(str2)); // 1
console.log(str1.localeCompare(str1)); // 0
}
결과 확인하기
실행되었습니다.
10. match()
{
"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
"javascript reference".search(/[a-z]/i); //0
console.log("javascript reference".search(/[a-z])g)
}
결과 확인하기
실행되었습니다.
12. normalize()
유니코드 문자열을 정규화하는 데 사용됩니다.
이 메소드는 문자열에서 조합 문자를 분리하고, 문자열 내에 동일한 문자를 갖는 여러 유니코드 시퀀스를 단일 정규화된 형식으로 변환합니다.
이 메소드는 문자열에서 조합 문자를 분리하고, 문자열 내에 동일한 문자를 갖는 여러 유니코드 시퀀스를 단일 정규화된 형식으로 변환합니다.
{
const str = 'a\u0301bc\u0327';
console.log(str.normalize()); // 'ábç'
console.log(str.normalize('NFD')); // 'a\u0301b\u0327c'
console.log(str.normalize('NFKC')); // 'abçá'
console.log(str.normalize('NFKD')); // 'a\u0301bç'
}
결과 확인하기
실행되었습니다.
13. padEnd()
"문자열".padEnd(길이)
"문자열".padEnd(길이, 문자열)
"문자열".padEnd(길이, 문자열)
{
"456".padEnd(1, '0'); //456
"456".padEnd(4, '0'); //4560
"456".padEnd(5, '0'); //45600
"456".padEnd(6, '1'); //456111
"456".padEnd(6, '12'); //456121
"456".padEnd(6, '123'); //456123
"456".padEnd(6); //456___ //빈칸으로 표시
"456".padEnd(5); //456__ //빈칸으로 표시
"456".padEnd(5, 'abc'); //456ab
"456".padEnd(6, 'abc'); //456abc
"456".padEnd(7, 'abc'); //456abca
"456".padEnd(8, 'abc'); //456abcab
}
결과 확인하기
실행되었습니다.
14. padStart()
"문자열".padStart(길이)
"문자열".padStart(길이, 문자열)
"문자열".padStart(길이, 문자열)
{
"456".padStart(1, '0'); //456
"456".padStart(4, '0'); //0456
"456".padStart(5, '0'); //00456
"456".padStart(6, '1'); //111456
"456".padStart(6, '12'); //121456
"456".padStart(6, '123'); //123456
"456".padStart(6); // 456
"456".padStart(5); // 456
"456".padStart(5, 'abc'); //ab456
"456".padStart(6, 'abc'); //abc456
"456".padStart(7, 'abc'); //abca456
"456".padStart(8, 'abc'); //abcab456
}
결과 확인하기
실행되었습니다.
15. repeat()
"문자열".repeat(숫자)
- repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다.
- repeat() 메서드는 기존 문자열을 변경하지 않습니다.
- repeat() 메서드는 매개변수 값은 양수로 설정합니다.
{
"javascript reference".repeat(0); //''
"javascript reference".repeat(1); //javascript reference
"javascript reference".repeat(2); //javascript referencejavascript reference
}
결과 확인하기
실행되었습니다.
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
"javascript reference".search(/[a-z]/i); //0
console.log("javascript reference".search(/[a-z])g)
}
결과 확인하기
실행되었습니다.
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
console.log("javascript".slice(0));
}
결과 확인하기
실행되었습니다.
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']
"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는 배열에서는 안되고 문자열에서만 된다.(그래서 이 식에서는 가운데에서만 실행?)
"javascript".split("").reverse().join("/"); //t/p/i/r/c/s/a/v/a/j
console.log("javascript".split(""));
}
결과 확인하기
실행되었습니다.
.trim()
{
}
결과 확인하기
실행되었습니다.
.trimEnd()
{
}
결과 확인하기
실행되었습니다.
.trimStart()
{
}
결과 확인하기
실행되었습니다.