01. at( )
"문자열".at(위치값)
- 메서드는 지정한 숫자(index)를 받아,
- 문자열에서 해당 되는 인덱스의 요소를 반환합니다.
{
const str = "Hello, World!";
console.log(str.at(0)); // "H"
console.log(str.at(6)); // ","
console.log(str.at(-1)); // "!"
}
02. charAt( )
"문자열".charAt(위치값)
- 문자열에서 지정된 인덱스 위치에 해당하는 문자를 반환합니다.
- 인덱스가 유효하지 않은 경우(음수이면서 문자열 길이보다 작은 경우 등), 빈 문자열("")을 반환합니다.
{
const str = "Hello, world!";
console.log(str.charAt(0)); // "H"
console.log(str.charAt(6)); // ","
console.log(str.charAt(12)); // "!"
}
{
const str = "Hello, world!";
console.log(str.charAt(-1)); // ""
console.log(str.charAt(20)); // ""
}
03. charCodeAt( )
"문자열".charCodeAt(위치값)
- 문자열에서 지정된 인덱스 위치에 해당하는 UTF-16 코드 유닛 값(0부터 65535 사이의 정수)을 반환합니다.
- 인덱스가 유효하지 않은 경우(음수이면서 문자열 길이보다 작은 경우 등), NaN을 반환합니다.
{
const str = "Hello, world!";
console.log(str.charCodeAt(0)); // 72
console.log(str.charCodeAt(6)); // 44
console.log(str.charCodeAt(12)); // 33
}
{
const str = "Hello, world!";
console.log(str.charCodeAt(-1)); // NaN
console.log(str.charCodeAt(20)); // NaN
}
04. charPointAt( )
"문자열".charPointAt(위치값)
- 주어진 인덱스에 해당하는 문자의 유니코드 코드 포인트를 나타내는 정수 값을 반환합니다.
- 문자열이 빈 문자열인 경우, undefined를 반환합니다.
- index가 문자열의 범위를 벗어난 경우에도 undefined를 반환합니다.
{
const str = "Hello, 🌎!";
console.log(str.codePointAt(0)); // 72
console.log(str.codePointAt(7)); // 127757
}
{
const str = "😃👍🏻";
console.log(str.codePointAt(0)); // 128515
console.log(str.codePointAt(1)); // 128077
console.log(str.codePointAt(2)); // 127995
}
05. concat( )
"문자열".concat(string2, string3, ..., stringX)
- 문자열 끝에 하나 이상의 문자열을 추가하여 새로운 문자열을 반환합니다.
- 위 문법에서 str은 concat() 메서드를 호출할 문자열이며, string2, string3, ..., stringX는 str 문자열 뒤에 추가할 하나 이상의 문자열입니다.
- concat() 메서드는 문자열 파라미터를 순차적으로 연결하여 하나의 문자열로 만듭니다.
- concat() 메서드는 원본 문자열을 변경하지 않습니다. 대신, 새로운 문자열을 반환합니다.
- 만약 concat() 메서드가 호출된 문자열이 빈 문자열이면, 새로운 문자열은 추가된 문자열들로만 구성됩니다.
- concat() 메서드는 + 연산자와 비슷한 역할을 합니다. 하지만, + 연산자는 자바스크립트에서 문자열 연결을 위한 권장 방법은 아닙니다.
- 대신, concat() 메서드를 사용하여 문자열을 연결하는 것이 더욱 권장됩니다.
{
const str1 = "Hello";
const str2 = "World";
const str3 = "!";
const newStr = str1.concat(", ", str2, str3);
console.log(str1); // "Hello"
console.log(str2); // "World"
console.log(str3); // "!"
console.log(newStr); // "Hello, World!"
}
{
const str1 = "";
const str2 = "JavaScript";
const newStr = str1.concat("Hello, ", str2, " World!");
console.log(str1); // ""
console.log(str2); // "JavaScript"
console.log(newStr); // "Hello, JavaScript World!"
}
06. includes()
"문자열".indexOf(검색값, [위치값])
- 문자열 포함 여부를 검색하여, 불린(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(compareString[, locales[, options]])
- JavaScript의 String 객체에 속하는 메서드로, 지정된 문자열과의 비교 결과를 반환합니다.
- 이 메서드는 주어진 문자열을 대소문자와 악센트 등의 규칙에 따라 비교하며, 비교 결과에 따라 음수, 양수, 또는 0을 반환합니다.
{
const str1 = "Hello";
const str2 = "World";
const str3 = "!";
const newStr = str1.concat(", ", str2, str3);
console.log(str1); // "Hello"
console.log(str2); // "World"
console.log(str3); // "!"
console.log(newStr); // "Hello, World!"
}
{
const str1 = "";
const str2 = "JavaScript";
const newStr = str1.concat("Hello, ", str2, " World!");
console.log(str1); // ""
console.log(str2); // "JavaScript"
console.log(newStr); // "Hello, JavaScript World!"
}
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); //null
"javascript reference".match(/r/); //r
"javascript reference".match(/r/g); //r r r
"javascript reference".match(/w/g); //null
"javascript reference".match(/R/ig); //r r r
}
12. normalize()
"문자열".normalize([form])
- 문자열에서 유니코드 정규화를 수행합니다.
- 이 메서드는 다양한 유니코드 문자열이 있을 때, 이러한 문자열을 표준화하여 동일한 문자열로 인식할 수 있도록 합니다.
{
const str1 = "\u1E9B\u0323";
const str2 = "ẛ̣";
console.log(str1 === str2); // false
console.log(str1.length); // 2
console.log(str2.length); // 2
console.log(str1.normalize() === str2.normalize()); // true
console.log(str1.normalize().length); // 1
console.log(str2.normalize().length); // 1
}
13. padEnd()
"문자열".padEnd(targetLength [, padString])
- 주어진 길이보다 짧은 문자열의 끝에 지정된 문자열을 삽입하여, 문자열의 길이를 지정된 길이로 만드는 메서드입니다.
{
const str = "hello";
const padStr = " world";
console.log(str.padEnd(10)); // "hello "
console.log(str.padEnd(10, "-")); // "hello-----"
console.log(str.padEnd(10, padStr)); // "hello world"
}
14. padStart()
"문자열".padStart(targetLength [, padString])
- padEnd()와 마찬가지로, 문자열의 길이를 조절하는 메서드 중 하나입니다.
- 다만, padStart()는 주어진 길이보다 짧은 문자열의 앞쪽에 지정된 문자열을 삽입하여 문자열의 길이를 지정된 길이로 만듭니다.
{
const str = "hello";
const padStr = " world";
console.log(str.padStart(10)); // " hello"
console.log(str.padStart(10, "-")); // "-----hello"
console.log(str.padStart(10, padStr)); // "hello world"
}
15. repeat()
"문자열".repeat(count)
- 주어진 문자열을 지정된 횟수만큼 반복한 새로운 문자열을 반환합니다.
- 이 메서드는 문자열의 길이를 조절하거나 문자열을 생성할 때 유용하게 사용할 수 있습니다.
{
const str = "hello";
console.log(str.repeat(3)); // "hellohellohello"
console.log(str.repeat(0)); // ""
console.log(str.repeat(2.5)); // ""
console.log(str.repeat(-1)); // RangeError
}
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는 소문자로 인식해줍니다.)
"javascript reference".search(/[a-z]/g);//0
}
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']
"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
"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
}