[JS] String 오브젝트 중 다양한 메서드를 알아보자

String.prototype.startsWith()

대상 문자열이 첫 번째 파라미터의 문자열로 시작하면 true / 아니면 false를 반환한다.

정규 표현식은 사용할 수 없으며 두 번째 파라미터는 옵션으로, 비교 시작 인덱스를 작성할 수 있다. (디폴트 0)

 

시작하는지를 확인하는 부분이 정규 표현식의 캐럿과도 같다.

const target = "ABC";

console.log(target.startsWith("AB")); // true
console.log(target.startsWith("BC")); // false
console.log(/^AB/.test(target)) // true

 

위에서 말한 두 번째 파라미터(옵션)를 넣으면 비교를 시작할 인덱스를 정할 수 있다.

예컨대 1번째 인덱스부터 BC로 시작하는지 비교하려고 하면 true가 나오게 되는 것이다.

const target = "ABCD";

console.log(target.startsWith("BC", 1)); // true
console.log(target.startsWith("BC", 2)); // false

---

String.prototype.endsWith()

대상 문자열이 첫 번째 파라미터의 문자열로 끝나면 true / 아니면 false를 반환한다.

정규 표현식은 사용할 수 없으며 두 번째 파라미터는 옵션으로, 사용할 문자열 길이를 지정할 수 있다. (디폴트 문자열 전체)

 

BC로 끝나는지 확인했을 때 그렇다면 true가 나온다.

정규 표현식의 달러와도 같다.

const target = "ABC";

console.log(target.endsWith("BC")); // true
console.log(target.endsWith("AB")); // false
console.log(/BC$/.test(target)) // true

 

옵션을 넣으면 그 길이만큼 비교할 수 있다.

현재 길이를 2로 지정했으면 대상 문자열의 2자리를 사용해서 아래의 경우 C가 생략되고 AB만 있을 때, AB로 문자열이 끝나기 때문에 true가 반환된다.

const target = "ABC";

console.log(target.endsWith("AB", 2)); // true

---

String.prototype.repeat()

파라미터에 작성한 수 만큼 복제, 연결해서 반환한다.

복제할 수는 옵션이며 디폴트 값은 0으로 진행된다.

 

ABC를 3번 반복한 경우는 그대로 3번 반복되어 출력된다.

파라미터를 작성하지 않거나 0을 작성하면 빈 문자열을 반환한다.

파라미터에 작성한 수가 소수라면 소수를 무시하고 정수만큼만 반복한다.

const target = "ABC";

console.log(target.repeat(3)); // ABCABCABC
console.log(target.repeat(0)); // ""
console.log(target.repeat()); // ""
console.log(target.repeat(2.7)); // ABCABC

---

String.prototype.includes()

대상 문자열에 첫 번째 파라미터의 문자열이 있으면 true / 없으면 false를 반환한다.

비교 시작 인덱스를 옵션으로 정할 수 있으며 디폴트는 0으로 진행된다.

includes에서도 정규 표현식 사용은 불가하다.

 

해당 메서드의 경우 String 메서드라서 number가 들어와도 string으로 변환하여 체크한다.

그래서 12의 경우 존재하기 때문에 true가 나온다. 

const target = "123";

console.log(target.includes("1")); // true
console.log(target.includes(12)); // true
console.log(target.includes("13")); // false

 

2번째 파라미터는 시작 인덱스인데 비교를 1번째 인덱스부터 진행할 경우 A는 생략하고 "BC" 형태가 되어 false가 나온다.

const target = "ABC";

console.log(target.includes("A", 1)) // false

---

String.prototype.padStart()

첫 번째 파라미터 값만큼 길이를 늘리고 늘어난 끝에 대상 문자열을 설정한다.

앞의 남은 공간에는 두 번째 파라미터를 채운다.

 

ABC로 시작할 경우 길이를 10으로 늘리면 789번째 자리는 ABC로 채워진다.

이 때 앞의 0~6번째 자리를 두 번째 파라미터로 채워준다.

 

만약 2번째 TC처럼 두 번째 파라미터가 더 긴 경우에는 왼쪽부터 들어가기 때문에 오른쪽을 잘라낸다.

000ABC 이런 경우 123만 들어가게 되는 것이다.

 

3번째 TC 같은 경우에는 이미 주어진 대상 문자열이 첫 번째 파라미터보다 크기 때문에 그대로 반환한다.

 

만약 두 번째 파라미터를 채우지 않는다면 그냥 첫 번째 파라미터 만큼 길이를 늘리고 만다.

그래서 마지막 TC의 경우 [   ABC] 같은 형태가 되어 길이가 6이 되는 것이다.

console.log("ABC".padStart(10, "123")); // 1231231ABC
console.log("ABC".padStart(6, "123456")); // 123ABC
console.log("ABCDE".padStart(3, "123")); // ABCDE
console.log("ABC".padStart(6).length); // 6

---

String.prototype.padEnd()

첫 번째 파라미터 값만큼 길이를 늘리고 늘어난 앞에 대상 문자열을 설정한다.

뒤의 남은 공간에는 두 번째 파라미터를 채운다. 

방금까지 한 것과 앞뒤가 바뀌었다고 보면 된다.

 

ABC의 뒤를 늘려서 10자리로 만든 후 123으로 채워준다.

나머지도 똑같이 뒤를 늘린다는 것만 다르지 다 똑같다.

console.log("ABC".padEnd(10, "123")); // ABC1231231
console.log("ABC".padEnd(6, "123456")); // ABC123
console.log("ABCDE".padEnd(3, "123")); // ABCDE
console.log("ABC".padEnd(6).length); // 6

---

공백 제거하기

• String.prototype.trimStart() : 문자열 앞 부분의 공백을 제거한다. (=trimLeft())
• String.prototype.trimEnd() : 문자열 뒤 부분의 공백을 제거한다. (=trimRight())
• String.prototype.trim) : 문자열 앞뒤 부분의 공백을 제거한다. 

const str = "   Hello, World!   ";
console.log(str.trimEnd());   // "   Hello, World!"
console.log(str.trimStart()); // "Hello, World!   "
console.log(str.trim());      // "Hello, World!"