🚀 26개의 내장 문자열 메서드 | JavaScript

너는 이곳에서 영상 버전을 볼 수도 있고, 코드를 스크롤해서 볼 수도 있다.
⏰ 영상 설명에는 모든 시간 스탬프의 링크가 있기 때문에 당신이 좋아하는 부분으로 넘어갈 수 있습니다.💜
🔗 모든 제목은 MDN 문서에 대한 링크입니다.

charAt  
지정한 색인에 있는 문자를 되돌려줍니다.

"Hello World".charAt(2); // returns "l"
// If we pass no value it defaults to an index of 0
"Hello World".charAt(); // returns "H"
// If we add an index that is undefined we get an empty string
"Hello World".charAt(20); // returns ""

charCodeAt  
지정한 색인에 있는 문자의 유니버설을 되돌려줍니다.

"Hello world".charCodeAt(2); // returns 72 for "l"
// If we pass no value it defaults to an index of 0
"Hello world".charCodeAt(); // returns 108 for "H"

concat  
두 개 이상의 문자열을 연결하고 연결된 문자열을 되돌려줍니다.
이것은 문자열에 사용되는 + 연산자와 매우 비슷하다.

"Hello".concat(" world"); // returns "Hello world"
// With multiple strings
"Hello".concat(" world", " and", " other", " planets"); // returns "Hello world and other planets"

endsWith  
문자열이 지정한 문자열로 끝날지 확인하십시오.우리는 선택할 수 있는 두 번째 파라미터를 추가하고 문자열을 제한할 수 있다.

"Dogs are the best!".endsWith('best'); // returns false
"Dogs are the best!".endsWith('best!'); // returns true
// With second parameter for ending index
"Dogs are the best!".endsWith('best', 17); // returns true (because we picked the end of the string is at index 17)

fromCharCode  
유니코드 값을 읽기 가능한 문자로 변환합니다.fromCharCode는 문자열의 대상이 많지 않은 정적 방법 중의 하나이다.우리가 줄곧 사용해 온 모든 기타 속성을 실례 속성이라고 부른다.우리는 String 키워드를 사용하여 그것에 접근했다.

String.fromCharCode(67); // returns "C"
// Using multiple characters
String.fromCharCode(67, 111, 100, 250); // returns "Codú"

includes  
문자열에 특정 문자열이 포함되어 있는지 확인하십시오.

"Dogs are the best!".includes("Dogs") // returns true
// With optional starting index
"Dogs are the best!".includes("Dogs", 1) // returns false
"Dogs are the best!".includes("ogs", 1) // returns true

indexOf  
문자열에서 지정한 값이 처음 나타나는 위치를 되돌려줍니다.

"test one two test".indexOf("test") // returns 0
"test one two test".indexOf("x") // returns -1
// With optional starting index
"test one two test".indexOf("test", 1) // returns 13

lastIndexOf  
문자열에서 지정한 값이 마지막으로 나타나는 위치를 되돌려줍니다.

"test one two test".lastIndexOf("test") // returns 13
// With optional limit because search starts from index 12.
"test one two test".lastIndexOf("test", 12) // returns  0

match
match () 방법은 문자열을 정규 표현식이나 문자열과 일치하는 결과를 검색합니다.

// returns the first match
"This is the BEST".match("i"); // returns a regex iterator like this ["i", index: 2, input: "This is the BEST", groups: undefined]
// With a regex looking for uppercase characters
"This is the BEST".match(/[A-Z]/); // returns a regex iterator like this ["T", index: 0, input: "This is the BEST", groups: undefined]
// you can get all the matches without the details if you use a global regular expression
"This is the BEST".match(/[A-Z]/g); // returns [ 'T', 'B', 'E', 'S', 'T' ]

matchAll
ES2020의 새로운 기능입니다. 브라우저 호환성을 확인하십시오.matchAll은 스테로이드 배합 방법과 같다.매칭을 위해 하나 RegExpStringIterator 를 되돌려줍니다.

// Working with with the RegExpStringIterator can become easy to work with if we spread it into an array.
const matches = [..."This is the BEST".matchAll(/[A-Z]/g)];
matches.forEach(element => console.log(element)); 

/* 
console.logs 
[ 'T', index: 0, input: 'This is the BEST', groups: undefined ]
[ 'B', index: 12, input: 'This is the BEST', groups: undefined ]
[ 'E', index: 13, input: 'This is the BEST', groups: undefined ]
[ 'S', index: 14, input: 'This is the BEST', groups: undefined ]
[ 'T', index: 15, input: 'This is the BEST', groups: undefined ] */

교체기 사용에 대한 자세한 내용은 docs를 참조하십시오.

normalize
우리는normalize로 유니버설 문자열을 규범화할 수 있는데, 이것은 무슨 뜻입니까?기본적으로 우리는 그것이 인류가 읽을 수 있는 형식을 볼 수 있다.

"\u0043\u006f\u0064\u00fa".normalize(); // returns "Codú"

  padEnd
문자열의 끝에 "padding"을 추가하여 길이와 같게 할 수 있습니다.기본적으로 공백으로 채우지만 문자를 바꿀 수도 있습니다.

// Entire length is 10 after padding
"Hello".padEnd(10); // returns "Hello     "
// Entire length is 10 after padding with characters too
"Hello".padEnd(10, "*"); // returns "Hello*****"

padStart
문자열의 시작 부분에 "padding"을 추가하여 길이와 같게 할 수 있습니다.기본적으로 공백으로 채우지만 문자를 바꿀 수도 있습니다.

// Entire length is 10 after padding
"Hello".padStart(10); // returns "     Hello"
// Entire length is 10 after padding with characters too
"Hello".padStart(10, "*"); // returns "*****Hello"

이러한 충전은 중요하지 않을 수도 있지만, npm에서 추출한 유행 라이브러리가 추출되어 인터넷을 기본적으로 파괴한 예가 있다.구글에서 왼쪽 키보드 이벤트를 검색하면 관련 정보를 얻을 수 있다. 

repeat
숫자를 매개 변수로 하고 지정한 문자열의 횟수를 반복하며 단일 문자열로 되돌려줍니다.

"Hello".repeat(3); // returns "HelloHelloHello".

replace
문자열에서 지정한 값이나 정규 표현식을 검색하고 지정한 값을 바꾼 새 문자열을 되돌려줍니다.우리는 문자열로 이 값을 바꾸거나 함수를 전달해서 일치하는 동작을 할 수 있다.우리가 전 세계 정규 표현식을 통과하지 않으면, 그것은 첫 번째로 발견된 정규 표현식을 대체할 뿐이다.

"cat, cat, cat".replace(/cat/, 'dog'); // returns "dog, cat, cat"
"cat, cat, cat".replace(/cat/g, 'dog'); // returns "dog, dog, dog"
"cat, cat, cat".replace("cat", 'dog'); // returns "dog, cat, cat"
"cat, cat, cat, bird".replace("cat", (i) => i + "dog"); // returns "catdog, cat, cat, bird"

  replaceAll
우리는 정규 표현식이나 문자열로 문자열의 모든 실례를 바꿀 수 있다.우리는 문자열로 이 값을 바꾸거나 함수를 전달해서 일치하는 동작을 할 수 있다.글로벌 레지스트를 사용할 때replace와 replaceAll 사이에는 큰 차이가 없다.Replace all은 전역 정규 표현식만 사용하지만 문자열을 전달하면 문자열의 모든 인스턴스가 자동으로 바뀝니다.두 번째 매개 변수는 모든 실례를 바꾸는 문자열일 수도 있고, 모든 실례를 조작하는 함수일 수도 있다.

"cat, cat, cat, bird".replaceAll(/cat/g, 'dog'); // returns "dog, dog, dog, bird" 
"cat, cat, cat, bird".replaceAll("cat", 'dog'); // returns "dog, dog, dog, bird" 
// With a function
"cat, cat, cat, bird".replaceAll("cat", (i) => i + "dog"); // returns "catdog, catdog, catdog, bird"

  search
문자열에서 지정한 값이나 정규 표현식을 검색하고 일치하는 시작 위치를 되돌려줍니다.

"cat, dog, cat".search("dog"); // returns 5
// With a regex
"cat, dog, cat".search(/dog/g); // returns 5

slice
문자열의 일부분을 추출하고 새 문자열을 되돌려줍니다.

"This is a string I want to slice".slice(27); // returns 'slice'
"This is a string I want to slice".slice(27, 28); // returns 's'
// And we can work backwards with negative values such as
"This is a string I want to slice".slice(-5); // returns "slice"
"This is a string I want to slice".slice(-5, -1); // returns "slic"

split  
문자열을 하위 문자열 배열로 분할합니다.우리는 선택할 수 있는 제한을 두 번째 매개 변수로 제공할 수 있다.

// For all characters to be split give an empty string
"Hello darkness".split(""); // returns ["H", "e", "l", "l", "o", " ", "d", "a", "r", "k", "n", "e", "s", "s"]
// To split at spaces
"Hello darkness my old friend".split(" "); // returns ["Hello", "darkness", "my", "old", "friend"]  
To limit the return length we can use an optional second parameter
"Hello darkness my old friend".split(" ", 2); // returns ["Hello", "darkness"] 

startsWith
문자열이 지정된 문자로 시작되었는지 확인하고 부울 값을 되돌려줍니다.우리는 그것에 선택할 수 있는 시작 인덱스를 두 번째 인자로 줄 수 있다.

"Hello".startsWith("h"); // true
"Hello".startsWith("e"); // false
// With optional starting index
"Hello".startsWith("e", 1); // true

  substring
지정한 두 색인 사이의 문자열에서 문자를 추출합니다.두 번째 매개 변수는 선택할 수 있다.

"Hello".substring(1, 4); // "ell"
// If we give no second parameter it will pick assume you have no end index.
"Hello".substring(1); // returns "ello" 

toLowerCase
문자열을 소문자로 변환

"HeLlO wOrLd".toLowerCase(); // returns "hello world"

toUpperCase  
문자열을 대문자로 변환합니다.

"Hello world".toUpperCase(); // returns "HELLO WORLD"

trim  
문자열 양쪽의 공백을 삭제합니다.

"   Hello world   ".trim(); // returns "Hello world"

trimEnd
끝에서 공백 트림

"   Hello world   ".trim(); // returns "   Hello world"

trimStart
문자열의 시작에서 공백을 잘라냅니다.

"   Hello world   ".trim(); // returns "Hello world   "

가입