오늘의 학습
문자열(string)
왜 배울까
문자는 컴퓨터 입력값이기도 하며 사람이 이해할 수 있는 언어이기도 하다. 컴퓨터가 코드와 문자열을 구분하기 위해서는 ''나 ""를 사용하여 문자열을 구분시켜줘야 하며, 다양한 문자열 메소드를 활용하여 서비스 이용자의 편의를 높일 수 있다.
어디에 쓸까
문자로 표현하고 싶은, 혹은 문자의 특성을 적용하고 싶은 모든 곳에 사용할 수 있다.
자동완성 기능처럼 문자열을 직접 사용하는 소프트웨어를 만드는 일에 사용할 수 있으며, 날짜를 나타내는 숫자를 문자열로 변경해 01같이 나타낼 수 있음
어떻게 쓸까
문자열의 속성
문자열의 한글자 한글자를 추출할 수 있다.
또한, 배열처럼 Index로 접근은 가능하지만, 값을 바꿀 수는 없다.
JS의 다른 원시 데이터 타입처럼, 모든 string method는 변경 불가능한 값(immutable value)이다.
let str = 'MacBook';
str[3] = 'J';
console.log(str) // 'MacBook'이다. 'MacJook'이 아니다.
let word = 'hello';
word.toUpperCase() // 'HELLO'
console.log(word) // 'hello', 값이 바뀌지 않는다문자열 합치기
'+' 연산자를 사용할 수 있다.
흥미로운 것은 string 타입과 다른 타입 사이에 + 연산자를 쓰면 string 형식으로 바뀐다는 것이다.
concat 메소드를 활용하면 + 연산자를 사용한 것과 같은 효과를 얻을 수 있다.
str1.concat(str2, str3 ...); 형태로 사용한다.
let str1 = 'Super'
let str2 = 'Mario'
let str3 = '1'
console.log(str1 + str2) // 'SuperMario'
console.log(str3 + 7) // '17'
console.log(str3 + true) // '1true'
console.log(str1.concat(str2, str3)) // 'SuperMario1' 메소드 이용하기
length
문자열의 전체 길이를 반환한다
let str = 'Holiday';
console.log(str.length); // 7indexOf
문자열에서 원하는 문자(열)을 찾는다.
str.indexOf(searchValue) 형태로 사용한다.
- argument: 찾고자 하는 문자열
- return value: 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1
- lastindexOf는 문자열 뒤부터 찾음
주의할 점은 indexOf 메소드는 대소문자를 구분한다는 것이다.
'Polar Bear'.indexof('Polar'); // 0
'Polar Bear'.indexof('Polar'); // -1, 찾고자하는 값이 없을 때는 -1 반환
'Polar Bear'.indexof('Bear'); // 6, 6번째 인덱스부터 이 결과가 등장하기 때문
'Tiny Tiny Boat'.indexof('Tiny'); // 5, 두 번 등장할 때는 처음 등장하는 인덱스 값을 반환
'Pine Apple'.lastIndexof('p'); // 7, 뒤에서 부터 찾는다고 인덱스 값도 뒤부터 부여되는 것이 아니다. 즉, 2가 아니다includes
찾고자 하는 값이 포함되어 있는지 여부를 확인한다.
indexOf와 비슷한 기능이지만 결과를 boolean으로 반환한다는 차이를 보인다.
IE같은 구형 브라우저에서는 작동하지 않으며 str.includes(searchValue) 형태로 사용한다.
split
원하는 값을 기준으로 문자열을 나눈다. 반환값은 배열임을 기억하자.
str.split(seperator) 형태로 사용한다.
- arguments: 분리 기준이 될 문자열
- return value: 분리된 문자열이 포함된 배열
let str = 'Hello Nihao Bonjour'; // ['Hello', 'Nihao', 'Bonjour']
console.log(str.split(' '));
// 공백(' ')이 아니라 빈 문자열('')을 넣으면 ['H', 'e', ... , 'u', 'r'] 를 반환substring
string의 시작 인덱스부터 종료 인덱스의 이전 값까지 부분 문자열을 반환한다.
str.substring(start, end) 형태로 사용한다. 시작값과 종료값의 위치는 바뀌어도 상관없다.
- arguments: 시작 index, 끝 index
- return value: 시작과 끝 index 사이의 문자열
let str = 'holiday';
console.log(str.substring(0, 3)); // 'hol', 3은 포함하지 않음. 0~2까지의 값 반환
console.log(str.substring(3, 0)); // 'hol', 시작 index와 끝 index 값이 바뀌어도 상관없음
console.log(str.substring(1, 4)); // 'oli'
console.log(str.substring(-1, 4)); // 'holi', 음수는 0으로 취급
console.log(str.substring(0, 20)); // 'holiday', 인덱스 범위를 초과하면 인덱스의 범위까지 반환slice
문자열의 일부를 추출하여 새로운 문자열을 반환한다.
substring과 비슷하나, 몇 가지 차이가 있다.
str.slice(start, end) 형태로 사용한다.
const str = 'The morning is upon us.';
console.log(str.slice(12));
// "is upon us.", 하나의 인덱스값을 넣으면 해당 인덱스부터 끝 인덱스까지 반환
console.log(str.slice(1, 5)); // "he m", 시작 인덱스에서 종료 인덱스 전 값까지 반환
console.log(str.slice(-3)); // "us.", -가 붙으면 뒤에서 부터 index 카운팅
console.log(str.slice(-3, -1)); // "us",
toLowerCase / toUpperCase
string을 모두 소문자 혹은 대문자로 바꾼다.
str.toLowerCase() / str.toUpperCase()
- arguments: 없음
- return value: 대, 소문자로 변환된 문자열
console.log('ELEPHANT'.toLowerCase()); // 'elepant'
console.log('elepant'.toUpperCase()); // 'ELEPHANT'추가 학습
Template literals(template strings)
ES6부터 도입된 문자열 표기법이다.
문자열 생성시 따옴표나 쌍따옴표대신 백틱( )을 사용한다.
템플릿 리터럴의 이점은 다음과 같다
- 줄바꿈(Multi-line strings)
백틱으로 템플릿 리터럴을 사용하면, 줄바꿈을 쉽게 표현할 수 있다. 기존 방식에서 줄바꿈을 하기 위해서는 해당 지점을 백슬래시()를 사용해야 했다. - 표현식 삽입(Expression interpolation)
${ }사이에 변수나 연산을 삽입할 수 있게 되었다.
let name = `모모`;
let bookShelves = 3
let books = 5;
console.log(`${name}가 가진 책의 갯수는 총 ${bookShelves * books}개 입니다.`);오늘의 생각
코플릿에서 유독 어떻게 풀어야 할 지 감이 안잡히는 문제가 있다.
예를 들어 이런 문제이다.
'수(num)와 문자열을 입력받아 차례대로 num개의 문자가 제거된 문자열을 리턴하라.'
function dropLetters(num, str) {
}문제를 봤을 때 처음 든 생각은 '이거 어떻게 하라는 거지?'이다.
'수와 문자열이 dropLetters의 매개변수긴한데... 차례대로가 무슨 의미지? 문자가 제거된 문자열을 리턴? 당장 저 안에 무엇을 써야 하는거지?
혼자 시간을 두고 풀어보니 문제 외에도 입력, 출력, 주의 사항 등 주어진 모든 자료를 참고해야 했다. 사실 일부러 문제에만 집중하기도 했는데, 문제 외 자료가 부트캠프에서 제공하는 일종의 힌트라고 생각했기 때문이다. programmers를 찾아보니 여기도 문제설명 외에 제한사항, 입출력 예를 확인할 수 있었다.
잘 안되면 작은 단위로, 또 주어진 모든 자료를 활용해서 문제에 접근하는 연습을 해야겠다.
