헷갈리는 메소드 정리: indexOf, includes, split, join 그리고 substring, slice, splice 비교
0
🍉 Learning Journal
목록 보기
8/36
🙋🏻♀️ [문자열] 어떤 값이 있는지 없는지 알고 싶을 때?
두 가지 사용가능한 메소드가 있는데, indexOf 나 lastIndexOf 를 써서 인덱스가 나오는지 아니면 -1 이 나오는지 확인해보거나, includes 를 써서 true 가 나오는지 false 가 나오는지 보면 된다. (이 방법은 배열도 가능)
'brie cheese'.indexOf('cheese') // 5
'brie cheese'.indexOf('Brie') // -1
'brie cheese'.includes('wine') // false
// note: includes 는 Internet Explorer 에서 support 되지 않는다 (as of October 2020) 🙋🏻♀️ [문자열] CSV 파일 등을 변환하고 싶을 때? 아니면 문자열을 배열로 쪼개고 싶을 때?
CSV 파일은 Comma-Separated Values 의 약자로, 쉼표로 연결된 텍스트 파일이다. 엑셀 자료 등을 다룰 때 종종 등장. split 메소드를 쓰는데, 줄바꿈(\n) 과 쉼표(,)로 텍스트를 쪼개어 배열로 리턴함으로써 자료를 적절히 다룰 수 있다. (cf. 탭문자(\t), Carriage return(\r\n)) 메소드 split 은 join 과 합쳐서도 자주 쓴다.
const csv = `Year,Model
1997,E350
2000,Cougar`;
const csvSplit = csv.split('\n'); // ["Year,Model", "1997,E350", "2000,Cougar"]
const feeling = "It's a beautiful day!";
feeling.split(" ").join("-"); // "It's-a-beautiful-day!"
// 간단한 문장의 단어를 replace 하는 것도 가능하다.
// fullStr.split(oldStr).join(newStr)
'pink note book'.split('pink').join('blue'); // "blue note book"
// 만약 split 메소드에 두 번째 인자(숫자)를 넣을 경우, 그 갯수만큼만 반환한다.
string.split(separator, limit);
feeling.split(" ", 3); // ["It's", "a", "beautiful"]🙋🏻♀️ [배열] slice VS splice: 원본을 변형시키는가
slice 는 배열을 복사할 때 사용한다. 원본을 변형시키지 않고, 새로운 배열을 반환한다. (얕은 복사)
// from 인덱스부터 until 인덱스 전까지가 복사된다.
// 두 번째 인자를 생략하면 from 부터 전체 복사
array.slice(from, until);
arr.slice(0) // 이렇게 배열 전체 복사에 흔히 쓰인다. splice 는 요소를 추가/삭제함으로써 원본을 변형시킨다.
// 두 번째 인자는 삭제하기를 원하는 요소의 갯수 (생략할 경우, index 뒷부분이 전부 삭제)
// 세 번째 인자부터는 추가하고 싶은 요소 (생략가능)
array.splice(index, number of elements, element, element);
let greeting = ["hello", "world"]
greeting.splice(1, 0, "beautiful")
console.log(greeting) // ["hello", "beautiful", "world"]정리하면 아래와 같다.
//slice
let arr=[1,2,3,4,5];
console.log(arr.slice(2)) // [3, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
//splice
let arr=[1,2,3,4,5];
console.log(arr.splice(2)) // [3, 4, 5]
console.log(arr); // [1, 2]🙋🏻♀️ [문자열] substring VS slice
문자열의 일부를 복사해온다는 점에서 같지만, 음수를 처리하는 방식에서 다르다. substring 은 NaN, 음수를 0으로 처리한다. 그리고 앞에 인덱스가 크면 알아서 뒤에 인덱스하고 자리를 바꿔서 처리한다. slice 는 NaN은 0으로 처리하지만, 음수는 뒤에서부터 세서 값을 반환한다.
const dance = "when it rains";
dance.substring(-3, 4) // "when"
dance.substring(4, 0) // "when"
dance.slice(4, 0) // ""
dance.slice() // "when it rains"
dance.slice(5) // "it rains" slice 음수처리는 예제를 보면서 연습해보면서 하기 👉🏼 read more
[ 참고자료 ]
Front-end Developer. 자바스크립트 파헤치기에 주력하고 있습니다 🌴