TIL_22_with Wecode 012 JavaScript about String

🦧 String 파헤치기!
쌍따옴표든, 홑따옴표든 모두 String형 값에 사용합니다.

let good = '이것도 맞고';
let better = "이것도 맞습니다";

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

console.log('js' === 'js'); // true
console.log('Js' === 'js'); // false

결과에서 보듯이 String의 대소문자가 구분됩니다.
웹사이트에 검색기능이 있는 경우 "Js"라고 검색했을 때,
J가 정확히 대문자인 것만 찾아주는 것이 아니라
대소문자 구분 없이 "js"라는 단어가 포함된 모든 컨텐츠를 찾고 싶을 수가 있습니다.

아래와 같이 임의의 String을 작성하고 toUpperCase와 toLowerCase함수를 호출하여 반환되는 값을 확인해봅시다.

let lastName = "Jieun Yang";
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();
lastName
//"Jieun Yang"
upperLastName
//"JIEUN YANG"
lowerLastName
//"jieun yang"

lastName 이라는 변수에 String형의 값을 할당하면
lastName 변수는 String형의 변수가 됩니다.
toUpperCase와 toLowerCase함수는 String에서 제공하는 함수입니다.
그리고 console에서 확인한 것과 같이,
lastName에 toUpperCase함수를 사용한다고 lastName 변수의 값 자체가 바뀌지는 않았습니다.
lastName은 이전 값을 그대로 갖고 있습니다.

🤗 문자 길이
문자인 String형도 length라는 속성으로 길이를 알 수 있습니다.

다음 예제는 폰 번호(phoneNumber)가 10자리도 아니고 11자리도 아니면 alert를 보여줍니다.

if (phoneNumber.length !== 10 &&
    phoneNumber.length !== 11) {
  alert("폰 번호 제대로 입력하셨나요?");
}

let name = prompt("성함을 입력해주세요")
if (name.length === 2) {
  alert("외자이시군요! 이름이 이쁘네요.")
} else if (name.length === 1) {
  alert("제대로 입력하셨나요?")
} else if (name.length === 3) {
  alert("멋진 이름입니다.");
} 

참고.
0으로 시작하는 숫자 표현식은 없습니다.
그래서 핸드폰 번호는 숫자로 이루어져 있지만,
문자열로 관리해야 컴퓨터가 첫 숫자인 "0"도 갖고 있게 됩니다.

let phoneNumber = 01012341234;
phoneNumber
//136954524
phoneNumber.length
//결과 없음.

이와 같이 phoneNumber는 Number형이며, 앞의 0이 없이 뒷 숫자만 할당되었습니다.
또한 Number형에는 length라는 속성이 존재하지 않습니다. (length 는 스트링에서 가지는 속성이므로.)

let phoneNumber = "01012341234";
phoneNumber
//"01012341234"
phoneNumber.length
//11

🤗 문자열 찾기

let info = "JavaScript는 프로그래밍 언어이다.";

위의 설명에 "프로그래밍"이라는 단어가 포함됐는지 알고 싶습니다.
indexOf() 함수는 문자열에 특정 문자열이 들어있는지 확인하고,
만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려줍니다.
해당 문자열이 없다면 -1을 반환합니다.

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍"); 
console.log(info, firstChar);
if (firstChar !== -1) { 
  info = info.slice(0, firstChar) + 
    "프로그래밍" + info.slice(firstChar+4, info.length); 
}
console.log(info);
//결과 "JavaScript는 프로그래밍 언어이다."

1. info 문구에서 "프로래밍"이 시작되는 index는 12입니다.
2. if (firstChar !== -1)

• firstChar이 -1이 아니면
• = "프로래밍"이라는 문구가 없지 않다면
• = "프로래밍"이라는 문구가 있다면
• = "프로래밍" 문구는 12번째에서 시작하므로 firstChar는 12 이라는 뜻입니다.
  "프로래밍"이라는 오타가 포함되어있으면 if문을 실행합니다.

3. info.slice(0, firstChar)
   slice는 이름그대로 텍스트를 잘라주는 함수입니다.

slice(잘릴 시작위치, 잘릴 끝위치)

문구의 첫 번째 값은 0입니다.
그래서 info 문구의 0부터 12번째까지 잘라서 반환합니다.
잘릴 끝위치가 조금 헷갈리는데, 12번째의 문구는 "프"입니다.
12번째가 끝 맞는데 해당 문자는 포함하지 않습니다.
바로 그 직전에서 끊어줍니다.

console.log(info.slice(0, firstChar));

4. info.slice(firstChar+4, info.length);
   info의 16번째인 "언" 이전의 스페이스부터 info의 길이(+4)인 22번째까지 자르게 됩니다.
   22번째는 문자가 존재하지 않지만,
   그 직전에 끊으니 "."까지 포함하는 문자열로 잘리게 됩니다.

console.log(firstChar+4, info.length);

🤗 Assignment
String의 slice()도 자주 사용되는 문자열 함수 중 하나입니다.
JavaScript String slice() method

var str = "서울시 양천구 신월동";
var res =  str.slice(0, 5);
str.slice(0, 5)
//"서울시 양"
str.slice(0)
//"서울시 양천구 신월동"
str.slice(3)
//" 양천구 신월동"
str.slice(3, 8)
//" 양천구 "
str.slice(0, 1)
//"서"
str.slice(-1)
//"동"

sliceCityFromAddress 함수를 구현해 주세요.

• sliceCityFromAddress 함수는 address 인자를 받습니다.
• address 인자에는 주소를 나타내는 string이 주어집니다.
• 주어진 주소가 어느 도시인지를 찾아내서, 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
• 주소는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
• "도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
  예를 들어, 다음과 같은 주소가 주어졌다면;

"경기도 성남시 분당구 중앙공원로 53"

다음과 같은 값이 리턴되어야 합니다:

"경기도 분당구 중앙공원로 53"

답변

function sliceCityFromAddress(address) {
let area = address.indexOf("도"); //도를 찾는 변수
let si = address.indexOf("시"); //시를 찾는 변수
if (area === -1){ 
  // area 변수에 "도" 가 없어서 -1을 반환하게 된다면
return address.slice(si + 2); 
  // "시"와 "시"의 앞부분 두 글자를 삭제시켜줌.
} else {
 return address.slice(0, area + 2) +  address.slice(si + 2);
 } // 경기도 + 분당구 중앙공원로 53 
}
sliceCityFromAddress("서울시 양천구 남부순환로");
//"양천구 남부순환로"
sliceCityFromAddress("경기도 성남시 분당구 중앙공원로 53");
//"경기도 분당구 중앙공원로 53"
sliceCityFromAddress("서울시 강남구 테헤란로 427");
//"강남구 테헤란로 427"	

address.slice(0, area + 2) = 도를 찾아서 도 뒤에 있는 글자들을 삭제해줌. 즉, 경기도만 남음.
address.slice(si + 2) = 시를 찾아서 시를 포함한 글자들을 삭제해줌. 즉, "~시"만 삭제됨.
전달 인자 -1은 배열의 마지막 원소를 가리키며, 전달인자 -3은 배열의 마지막 원소부터 앞쪽으로 세 번째 원소를 가리킨다.