[오늘 공부한 부분]
1. 항해99 입학시험 - 자바스크립트 특정 문자열 제거 함수 사용하기
1. 항해99 입학시험
오늘은 항해99 10기 입학시험이 있던 날이다. 오늘 주어진 과제는 화성땅공동구매 화면에 가격란을 추가하고 평수에 따라 가격을 500원씩 계산한 값을 화면단에 보여주는 것이었다. 일단 가격에 대한 변수를 price라고 만들어 주었고, 그 값을 평수 * 500으로 구현하면 되는 것인데, 평수의 변수 값에 "평"이라는 문자때문에 연산에 에러가 났다. 그래서 특정 문자열 제거하는 함수를 구글링하여 문제를 해결했다.
1. 처음 구현했던 방법은 substring()를 사용한 방법이었다. 평수가 "10평, 20평, 30평, 40평, 50평" 이렇게 정해져 있었기 때문에 앞에서부터 두번째 인덱스까지만 추출해서 곱하기 연산을 하는 방법을 사용했다. 표면적으로 과제 구현에 성공은 했지만, 훗날 만약에 3자릿수 평수 예를 들면 100평과 같은 평수를 주고 싶을때는 제대로 구현되지 않을 코드라는 점에서 개선이 필요했다.
2. 그래서 최종적으로 사용한 함수는 replace() 함수였다. 이 함수는 특정 문자열을 제거해 주기 때문에 "평"이라는 문자를 제거하고 숫자값만 추출하여 평수의 자릿수와 관계없이 가격을 추출할 수 있는 코드가 되었다.
2. 특정 문자열 제거하는 함수
① substr() : 함수는 특정 위치에서 시작하여 길이만큼 문자열을 반환한다.
str.substr(start, length) // start위치에서 length만큼의 문자열을 추출
var str = 'abcdef';
console.log(str.substr(1)); //bcdef
console.log(str.substr(1,4)); //bcde
console.log(str.substr(-5,2)); //bc
② substring() : 특정 위치에서 시작하여 특정 인덱스 전 까지 문자열을 반환한다.
str.substring(indexStart, indexEnd) //indexStart는 추출하고자 하는 문자열의 시작 인덱스, indexEnd는 설정된 값 이전 인덱스까지
var str = 'abcdef';
console.log(str.substring(1)); //bcdef
console.log(str.substring(1, 4)); //bcd
console.log(str.substring(4, 1)); //bcd
console.log(str.substring(-1)); //abcdef
③ slice() : 함수는 인덱스 범위로 문자열을 자른다는 개념은 substring() 함수와 동일하지만 미묘한 차이가 존재한다.
str.substring(indexStart, indexEnd) // indexStart는 추출하고자 하는 문자열의 시작 인덱스, indexEnd는 설정된 값의 이전 인덱스까지 문자열을 추출
var str = 'abcdef';
console.log(str.slice(1)); // bcdef
console.log(str.slice(1, 4)); // bcd
console.log(str.slice(-1)); // f
console.log(str.slice(-4, -1)); cde※ substring() 함수와 slice() 함수의 차이점
- substring() 함수와 slice() 함수는 매개변수의 값이 음수일 경우 동작되는 방식이 다르다.
- substring() 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우 값을 교환하여 동작
- slice() 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우 빈 값을 반환
- substring() 함수는 첫 번째 매개변수가 음수일 경우 0으로 처리
- slice() 함수는 첫 번째 매개변수가 음수일 경우 문자열의 길이 + 첫 번째 매개변수의 결괏값으로 설정
④ replace() : 특정 문자열을 빈 값('')으로 대체, 정규식을 만족하거나 특정 문자열이 존재할 경우 원하는 문자열로 대체할 수 있다.
var str = 'abcdef';
console.log(str.replace('a', '')); //bcdef
console.log(str.replace('f', '')); //abcde
출처 :https://developer-talk.tistory.com/178
'Coding > Javascript' 카테고리의 다른 글
| javascript 기초 문법 (0) | 2022.11.01 |
|---|
