자바스크립트 String 내장 메서드 살펴보기, 세번째!
raw()
이건 뭐지! 처음 보는 메서드였다.
MDN에 의하면 템플릿 리터럴의 태그 함수라는데 어떻게 사용하고 어떤 상황에 쓰이는지 살펴보자.
템플릿 리터럴의 유일한 내장 함수이다.
String.raw`1 + 1 은 ${1+1}` // '1 + 1 은 2'
String.raw(
{
raw : '여기사이에들어가요'
},
"하나", "둘", "셋", "넷", "다섯"
); // '여하나기둘사셋이넷에다섯들어가요'
raw에 그냥 ()로 호출하면 에러가 발생하는데
raw 키 값이 들어가 있는 오브젝트를 넣으면 에러가 발생하지 않았다.
여하나기둘사셋이넷 에다섯들어가요
라는 다소 알아볼 수 없는ㅋㅋㅋ 결과값이 나오긴 했지만 ..
결과를 보면 알 수 있다시피 각 문자 사이에 raw 메서드 두번째 인수로 전달한 값이 하나씩 박혀있다.
어떤 상황에 유용하게 쓰일 지는 모르겠지만..ㅋㅋㅋ 신기하군.
repeat()
문자열을 주어진 횟수만큼 반복하여 새로운 문자열을 반환하는 메서드이다.
'저기요'.repeat(10);
// '저기요저기요저기요저기요저기요저기요저기요저기요저기요저기요'repeat을 사용하여 광기가 넘치는 문자열을 만들어보았다.
replace()
문자열 또는 정규표현식 패턴과 일치하는 문자열을 새로운 문자열로 교체하여 반환한다.
const str = '제제 어서 나무에 올라와';
str.replace('제제', 'Zeze'); // 'Zeze 어서 나무에 올라와'
"I can't die I'm all in1234".replace(/\d*\w$/g, '☆')
// "I can't die I'm all in☆"정규표현식은 잘 몰라서 잘 쓰진 못하지만....... 정규 표현식으로도 가능하다.
나도 정규 표현식 잘 쓰고 싶다 부엥 ㅠㅠ
replaceAll()
replace와 사용법은 동일하다.
'I feel bloom, I feel bloom, I feel bloom'.replaceAll('bloom', 'blue');
// 'I feel blue, I feel blue, I feel blue'replace를 썼다면 맨 첫번째로 찾은 bloom만 blue로 바뀐다.
replaceAll은 찾은 모든 bloom을 blue로 바꾼 새 문자열을 반환한다.
search()
정규표현식 또는 문자열과 일치하는 것이 있으면 인덱스 값을 반환하고 없으면 -1을 반환하는 메서드이다.
'Lilac 꽃이지는 날 good bye'.search('꽃이지는') // 6꽃이지는 이 시작하는 인덱스가 6이므로 6이 반환되었다.
slice()
원본 문자열을 변경하지 않고 새로운 문자열을 반환한다.
인자로는 시작 인덱스, 끝 인덱스(옵션)를 넣어서 사용할 수 있다.
'난 당신 맘에 들고 싶어요'.slice(0)
// '난 당신 맘에 들고 싶어요'
'난 당신 맘에 들고 싶어요'.slice(-1)
// '요'
'난 당신 맘에 들고 싶어요'.slice(-3)
// '싶어요'
'난 당신 맘에 들고 싶어요'.slice(11, 14);
//'싶어요'두번째 인자 끝 인덱스 값으로 넣은 인덱스 - 1 까지 범위를 가진다.
예를 들어 slice(11, 14)로 사용하면 11 ~ 13인덱스에 해당하는 문자열이 반환
split()
알고리즘 문제 풀면 정말 지겹게도 많이 사용하는 split.
split 메서드에 넣은 separator를 기준으로 문자열을 잘라서 배열로 반환한다.
이제 알았지만 두번째 인자로 limit도 넣을 수 있다.
`Yellow C.A.R.D. 이 선 넘으면 침범이야 beep`.split(' ');
// ['Yellow', 'C.A.R.D.', '이', '선', '넘으면', '침범이야', 'beep']
`Yellow C.A.R.D. 이 선 넘으면 침범이야 beep`.split(' ', 1);
// ['Yellow']startsWith()
문자열이 지정된 문자열의 문자로 시작하는지 확인하여 true 또는 flase를 반환한다.
처음 보는 메서드!! 인데 낯이 익어서 다시 살펴보니 지지난 번에 살펴본 endsWith가 있었다.
endsWith가 마지막 문자열이 해당 문자로 끝나는지를 확인했다면 startsWith는 문자열이 해당 문자로 시작하는지 확인한다.
'우리는 오렌지 태양 아래'.startsWith('오렌지'); // false
'우리는 오렌지 태양 아래'.startsWith('우리는'); // truesubstring()
아니 얘는 볼 때마다 subString() 이렇게 써야될 것 같은데
substring() 이 올바른 메서드 이름이다......... ㅋㅋㅋㅋㅋㅋ 으앙
시작 인덱스 를 넣으면 해당 인덱스로부터 끝까지 해당하는 위치의 문자열을 반환하고,
시작 인덱스 와 끝 인덱스 를 인자로 넣으면 n ~ m 범위 인덱스에 해당하는 문자열이 반환된다.
'왼손으로 그린 별 하나'.substring(8) // '별 하나'써본 기억은 딱히 없긴 한데.. 쓴다 해도 맨날 헷갈려서
subString is not a function 이 문구를 자주 만나지 않을까......
서브스트링은 소문자다.. 소문자다.. 소문자야
다음에 한번만 더 MDN 문서 털면 더이상 사용되지 않는 메서드를 제외하고
String 메서드는 전부 한번씩 살펴볼 수 있을 것 같다 ! 😋
참고 자료
MDN 공식문서
