JavaScript_19.String

19-1. String 파헤치기!

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

---

19-2. 대소문자 바꾸기

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

아래와 같이 임의의 String을 작성하고 toUpperCase와 toLowerCase메소드를 호출하여 반환되는 값을 확인해 보자.

let lastName = 'Yeri Kim';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();

console.log(lastName); // Yeri Kim
console.log(upperLastName); // YERI KIM
console.log(lowerLastName); // yeri kim

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

---

19-3. 문자 길이

📌길이를 나타내는 속성인length

let phoneNumber = 01012349876;

console.log(phoneNumber);
console.log(phoneNumber.length)
//1012349876
undefined 출력.

📌숫자 0으로 시작될 경우 맨 앞의 숫자 0은 잘린 채 출력됨. 그래서 꼭 따옴표를 사용해야함. 또한 length 속성을 이용하려면 String형으로 저장해야함

let phoneNumber = "01012349876";

console.log(phoneNumber);
console.log(phoneNumber.length);

---

19-4. 문자열 찾기(indexof)

📌indexof메소드는 문자열에 특정 문자열이 들어있는지 확인하고, 만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려준다. 해당 문자열이 없으면 -1을 반환한다.

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

위의 설명에 "프로그래밍" 이라는 단어가 포함됐는지 알고싶다.

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍");

console.log(info);

if(firstChar !== -1) {
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length);
}
console.log(info)

코드를 한 줄 한 줄 파헤쳐보자.

1. info 문구에서 "프로래밍"이 시작되는 index는 12이다.
2. if (firstChar !== -1)
   • firstChar이 -1이 아니면
   • 즉, "프로래밍"이라는 문구가 없지 않다면!
   • 즉, "프로래밍"이라는 문구가 있다면!!!
   • "프로래밍" 문구는 12번째에서 시작하므로 fistChar는 12입니다. 따라서 조건문은 true. "프로래밍"이라는 오타가 포함되어있으면 if문을 실행한다.

3. info.slice(0, firstChar)
   • slice메소드는 이름 그대로, 텍스트를 잘라주는 함수이다.
   • 그 구조는 다음과 같다.

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

• 잘릴 시작위치는 0이다. 잘릴 끝위치는 `firstChar`로 12이다.
• 그래서 `slice`메소드는 `info`문구의 0부터 11번째 까지 잘라서 반환한다.
• 잘릴 끝위치가 조금 헷갈리는데, 잘릴 끝위치의 문구는 포함하지 않는다.
• 따라서 12번째의 문자는 포함하지 않는다. 바로 그 직전에서 끊어준다.
• 지금 `slice`메소드가 어렵겠지만 일단 `slice`라는 메소드가 있다는 것만 기억하기

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

4. info.slice(firstChar+4, info.length);
   • 잘릴 시작위치는 16이다.(firstChar+4 = 12 + 4 =16)
   • 잘릴 끝 위치는 22이다.(info.length = 22)
   • info의 16번째 문자인 "언"부터 22번째 문자 이전까지 자르게 된다.
   • 22번째 문자가 존재하지 않기 때문에, 그 직전에 끊으니 "."까지 포함하는 문자열로 잘리게 된다.

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

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍");

console.log(info);

if(firstChar !== -1) {
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length);
}

console.log(firstChar+4, info.length);
//'JavaScript는 프로래밍 언어이다.'
'JavaScript는 프로그래밍 언어이다.'
16 23

📌slice의 예시

let text = "Hello world!";
let result = text.slice(0, 5);

console.log(result)
//'Hello' 출력

let text = "Hello world!"; 
let result = text.slice(3);

console.log(result)
'lo world'

✍️Assignment

그 후 sliceCityFromAddress 함수를 구현해 주세요.
sliceCityFromAddress 함수는 address 를 인자로 받습니다.

address 는 주소를 나타내는 string 입니다.

주어진 주소가 어느 도시 인지를 찾아 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.

도시는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".

"도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.

📢구글링을 통해서 다른분의 벨로그를 보고(자세한 블로그 포스팅 감사합니다😝😁😆) 힌트를 얻어 문제를 이해하는데에 성공했다! 난 정말이지 구글이 없다면...(아득해지는 정신)큰일났을듯

~ 📖문제 풀이 ~

1. 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴
2. 도시는 무조건 "시"로 끝난다. ex)고양시, 파주시, 서울특별시...

<첫번 째 정답>

function sliceCityFromAddress(address) {
	return address
    • split(" ") // 공백기준으로 배열을 나눔
    • filter(e => e[e.length - 1] !== "시") // 배열순회 + 각 요소의 끝자리가 "시"인지 확인
    • join(" ") //다시 한칸씩 띄워서 문자열로 붙임
 }

📌split

: split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);  //3번째 인덱스에 접근
// expected output: "fox"

const chars = str.split('');
console.log(chars[8]);  //8번째 문자열에 접근
// expected output: "k"

const strCopy = str.split();
console.log(strCopy);  //전체 문자열을 출력
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

📌filter

: filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

📌join

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

<두번 째 정답>

function sliceCityFromAddress(address) { 
  let doIndex = address.indexOf("도"); // "도"로 끝남
  let siIndex = address.indexOf("시"); // "시"로 끝남

  if (siIndex == -1) { // "시"가 없는 경우
    return address; // 주소 그대로 내보냄
  } else if (doIndex !== -1 && siIndex !== -1) { // "도", "시" 모두 있는 경우
    return address.slice(0, doIndex+1) + address.slice(siIndex+1);
  } else { // 나머지 "도"는 없고 "시"만 있는 경우
    return address.slice(siIndex+2);
  }
}

console.log(sliceCityFromAddress("서울특별시 강남구 테헤란로 427"))
//강남구 테헤란로 427 출력