TIL) Data Type - String 뽀개기

Solmii·2020년 5월 27일
0

JavaScript

목록 보기
12/24
post-thumbnail

Data Type에 대해 정리하긴 했지만....

위코드 과제 진행하면서 새로 알게 된 내용이나 재미있는 내용이 많아서 뽀개기 시리즈를 정리해본다!!!


대소문자 바꾸기

String형에서 제공하는 기본 함수들이 많은데 대표적으로 알아서 대소문자를 바꿔주는 함수가 있다!

음? 겉보기엔 딱히 유용해보이지 않는데? 라고 생각했지만...

예를들어 웹사이트에 검색기능이 있는 경우 "Python"이라고 검색했을 때, P가 정확히 대문자인 것만 찾아주는 것이 아니라 대소문자 구분 없이 "python"이라는 단어가 포함된 모든 컨텐츠를 찾고 싶을 때 유용하게 사용할 수 있다!

let lastName = 'Solmi Kang';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();

console.log(lastName); // Solmi Kang
console.log(upperLastName); // SOLMI KANG
console.log(lowerLastName); // solmi kang
  • toUpperCase : 해당 변수의 값을 모두 대문자로 변환

  • toLowerCase : 해당 변수의 값을 모두 소문자로 변환


핸드폰 번호는 문자열로 관리한다는 사실!!!!

핸드폰 번호는 01012345678 로 항상 0부터 시작한다.

하지만 0으로 시작하는 숫자 표현식은 없다!
(01은 1이고, 034는 34니까...)

const phoneNumber = 01012349876;
console.log(phoneNumber); // 1012349876
console.log(phoneNumber.length); // undefined

⇒ 이렇게 되버림~!

let phoneNumber = "01012349876";
console.log(phoneNumber); // 01012349876
console.log(phoneNumber.length); // 11

그래서 요렇게 문자로 관리해준다!


문자열 찾기

indexOf() 함수를 이용해 특정 문자열이 들어 있는지 확인하고, 있으면 문자열의 index 위치를, 없으면 -1을 반환해준다!

( indexOf() 함수에 대한 자세한 설명은 여기에 정리해뒀음 )

나의 경우는 indexOf를 중복 문자를 찾을 때 사용했고, 사실 그 외에 사용처를 더 생각해보진 않았는데...
댓글 기능을 구현할때 욕설이 포함되면 달지 못하도록 차단할 때 사용할 수 있다고 한다.

차단할 단어 모음을 만들고, 사용자가 댓글을 달 때 차단할 단어 모음과 매치해보고, 하나라도 일치하면 댓글을 달지 못하도록 막는 것!

예시로 살펴봅시당!!!!

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍"); // "프로래밍"이 시작되는 index는 12

if (firstChar !== -1) { // firstChar가 -1이 아니면(="프로래밍"이라는 문자가 들어있으면)
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length); 
}
console.log(info);

프로래밍 이라는 문구가 오타가 나서 프로그래밍 이라고 바꿔주려 한다!

(1) firstChar !== -1
이 조건에 만족한다는건, "프로래밍" 이라는 문자열이 포함되었다는 뜻이므로, if 문은 "프로래밍" 이라는 오타가 난 문장에 한해서만 실행된다!

(2) info =
info 변수의 값(=문자열)을 오타를 수정하고 난 후의 문자열로 재 지정한다.

(3) info.slice(0, firstChar)

JavaScript는 프로래밍 언어이다.

info 문자열의 0번째 부터 firstChar 전 까지, 즉 11번째까지 잘라서 반환한다.

JavaScript는 프로래밍 언어이다.

(4) + "프로그래밍" +

"프로그래밍" 문자열을 추가해준다.

JavaScript는 프로그래밍 언어이다.

(5) info.slice(firstChar+4, info.length);
info 문자열의 firstChar+4 번 째 부터, info.length 까지

즉, 12+4 = 16 번째 부터, info 문자열의 길이 = 22의 전인 21번째 까지 반환

JavaScript는 프로래밍 언어이다.

결과🤓!

JavaScript는 프로그래밍 언어이다.

💁🏻‍♀️ 참고로, 이 코드는 백틱을 이용해서info = ${info.slice(0, firstChar)}프로그래밍${info.slice(firstChar+4, info.length)}; 이렇게 편하고 보기 좋게 적을 수 있다!


profile
하루는 치열하게 인생은 여유롭게

0개의 댓글