문자열을 자를 때 사용하는 함수를 알아보자!
✂ split()
str.split(separator, limit)
separator는 문자열을 자를 때 기준이 될 문자열,
limit은 문자열을 끊을 최대 개수이다. 앞에서부터 끊어진 개수만큼만 반환된다.
return값은 끊어진 문자열을 담은 Array이다.
let words = 'Oh Happy Day';
console.log(words.split()); // ['Oh Happy Day']
console.log(words.split(' ')); // ['Oh', 'Happy', 'Day']인자에 아무것도 전달하지 않으면 원본 문자열이 출력된다.
문자열 하나씩 자르기
split('')와 같이 빈 문자열의 사용은 추천하지 않는다고 한다. 아래의 코드로 기능을 대신할 수 있다.
let words = 'Oh Happy Day';
// 1
let test = [...answer];
// 2
let test = Array.from(answer);
console.log(test); // ['O', 'h', ' ', 'H', 'a', 'p', 'p', 'y', ' ', 'D', 'a', 'y']구분자 여러 개 사용하기
구분자 사이에 | 을 넣어주면 된다.
let words = 'Oh#Happy$Day';
console.log(words.split('#|$')); // ['Oh', 'Happy', 'Day']🧲 join()
split()과 자주 사용하는 join()을 알아보겠다!
arr.join(separator)
배열의 모든 요소들을 하나의 문자열로 연결한다.
separator은 각 요소를 연결할 문자열이다.
let arr = ['Oh', 'Happy', 'Day'];
console.log(arr.join()); // Oh,Happy,Day
console.log(arr.join('')); // OhHappyDay
console.log(arr.join(' ')); // Oh Happy Day
console.log(arr.join('-')); // Oh-Happy-Dayjoin() 인자를 생략하면 ,(쉼표)로 연결한다.
join('')와 같이 빈 문자열의 경우 아무 문자 없이 연결된다.
✂ substring()
str.substring(startIndex, endIndex)
startIndex는 반환할 문자열의 시작 인덱스
endIndex는 반환할 문자열의 마지막 인덱스 +1 (포함하지 않으므로)
return값은 자른 문자열(string)을 반환한다.
let words = 'Fighting';
console.log(words.substring()); // Fighting
console.log(words.substring(1)); // ighting
console.log(words.substring(1, 4)); // igh
console.log(words.substring(1, 1)); // ''인자가 모두 생략된 경우, 원본 문자열을 반환한다.
endIndex가 생략된 경우, 끝까지 추출한다.
startIndex와 endIndex가 같은 경우, 빈 문자열을 반환한다.
✂ slice()
str.slice(startIndex, endIndex)
slice()는 substring()과 사용법이 같다.
let words = 'Fighting';
console.log(words.slice()); // Fighting
console.log(words.slice(1)); // ighting
console.log(words.slice(1, 4)); // igh하지만 slice()와 substring()의 차이점이 있다!
🤼♂️ substring() vs slice()
1. startIndex > endIndex
let words = 'Fighting';
console.log(words.substring(3, 0)); // 'Fit'
console.log(words.slice(3, 0)); // ''substring은 두 개의 인자가 바뀌어 실행된다. (substring(3,0) === substring(0,3))
slice는 빈 문자열을 반환한다.
2. startIndex < 0 or endIndex < 0 (음수)
let words = 'Fighting'; // (length = 8)
console.log(words.substring(-3, 8)); // 'Fighting'
console.log(words.slice(-3, 8)); // 'ing'
console.log(words.substring(0, -3)); // ''
console.log(words.slice(0, -3)); // 'Fight'substring은 음수를 0으로 계산한다.
substring(-3, 8) === substring(0, 8)
substring(0, -3) === substring(0, 0)
slice는 음수를 절댓값으로 바꾸어 끝에서부터 찾는다.
slice(-3, 8) === slice(8-3, 8) : -3의 절댓값인 3 -> 맨 끝에서 3번째인 값부터 시작한다.
slice(0, -3) === slice(0, 5) : 0부터 맨 끝에서의 3번째 인덱스 앞까지 찾는다.
cf)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring
