문자열

holang-i·2021년 3월 3일

str[index]

문자열은 값 하나하나에 접근할 수 있다.
let str = 'Hello JavaScript!';
console.log(str[3]); // 'l'
console.log(str[7]); // 'a'
console.log(str[13]); // 'i'
각각의 인덱스로 값에 접근은 가능하지만,
값을 직접적으로 바꿀 수는 없고, 오로지 읽는 것만 가능하다.

문자열은 항상 read-only!

새로 할당하지 않는 한 그 값이 바뀌지 않는다.

인덱스에 접근해서 특정 값을 변경하려고 해도 콘솔에 출력해보면,
값은 바뀌지 않고, 원래 문자 그대로 출력된다.
let str = 'I love JavaScript';
str[8] = 'hi'; // 'I love J a('hi'로 바꾸었다) vaScript'
//하지만 str의 값을 콘솔에 찍어보면, 원래 값이 출력된다.
console.log(str); // 'I love JavaScript'

문자열에서의 + 연산자

문자열에서는 + 연산자를 사용할 수 있다.

string으로 강제 변환된 값이 나오게 된다.

(+) 연산자를 사용해서 문자열들을 더할 수 있다.
let str1 = 'hello', 
    str2 = 'javascript!';
console.log(str1 + ' ' + str2); //"hello javascript!"
string 타입과 다른 타입 사이에 +연산자가 있는 경우 다른 타입이 '' 문자열로 감싸지면서 string형식으로 변환된다.(tostring)
let str1 = '안녕하세요';
let num1 = '789';
console.log(str1 + num1); // '안녕하세요789';

let num1 = 345;
let str1 = 'JavaScript';
let num2 = 8;
console.log(num1 + str1 + num2); // '345JavaScript8'

let str1 = true;
let str2 = 'hi';
console.log(str1 + str2); // 'truehi'

let num1 = NaN;
let str1 = ' ';
let bool1 = false;
console.log(num1 + str1 + bool1); // 'NaN false'

concat

문자열을 연결할 때 concat 메서드를 사용할 수 있다.

concat은 메서드를 호출한 뒤에 배열 뒤에 각 인수를 순서대로 붙여서 새로운 배열을 만든다.

만약 인수가 배열이면 그 구성요소가 순서대로 붙는다.
let arr1 = [1, 2, 3, 4, 5];
let arr2 = ['봄', '여름', '가을', '겨울'];
console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5, '봄', '여름', '가을', '겨울'];
인수가 배열이 아닌 경우 인수 자체가 붙게 된다.
let str1 = '안녕하세요';
let str2 = ' JavaScript는';
let str3 = ' 재밌는 언어입니다!';
str1.concat(str2, str3); // "안녕하세요 JavaScript는 재밌는 언어입니다!"

str.length

length property는 문자열의 전체 길이를 반환한다.

let skill = 'JavaScript, HTML, CSS, React, NodeJS, WAS, ...';
console.log(skill.length); //46

let favoriteLanguage = 'JavaScript!!!';
console.log(favoriteLanguage.length); //13

str.indexOf()

indexOf( ) 안에 arguments(인자)로 들어오는 값을 찾는 메서드이다.

찾으려는 값이 있는 경우 처음으로 일치하는 index를 리턴한다.
let str1 = 'Hello JavaScript';
console.log(str1.indexOf('ll')); // 2

let str2 = 'stringHandling';
console.log(str2.indexOf('g')); // 5
찾고자하는 문자열이 없는 경우 -1을 리턴한다.
let str1 = 'qwertyuiop';
console.log(str1.indexOf('a')); // -1

let str2 = 'dufirotigu';
console.log(str2.indexOf('O')); // -1
indexOf( )는 아래에서 확인할 includes( )의 기능을 포함하고 있기 때문에 indexOf( )를 잘 알아두면 좋다.

str.lastIndexOf

lastIndexOf( ) 안에 arguments(인자)로 들어오는 주어진 값과 일치하는 부분을 인덱스의 마지막부터 역순으로 검색한다.

찾으려는 문자열이 있는 경우 처음으로 일치하는 인덱스를 반환한다.
let str1 = 'Rather be dead than cool.';
console.log(str1.lastIndexOf('d')); // 13

let str2 = 'I love Mint chocolate';
console.log(str2.lastIndexOf('c')); // 15
찾으려는 값이 없는 경우 -1을 리턴한다.
let str1 = 'JavaScript!';
console.log(str1.lastIndexOf('q')); // -1

let str2 = 'tiramisu';
console.log(str2.lastIndexOf('n')); // -1

str.includes()

includes( ) 안에 인자로 들어오는 값이 문자열에 있는지 찾는다.

찾고자하는 문자열이 있으면 true를 리턴한다.
let str1 = 'The foundation of every state is the education of its youth.';
console.log(str1.includes('state')); // true

let str2 = 'The superior man acts before he speaks, and afterwards speaks according to his action.'
console.log(str2.includes('acc')); // true
찾고하자는 문자열이 없으면 false를 리턴한다.
let str1 = 'qwertyuiop';
console.log(str1.includes('aa')); // false

let str2 = '안녕하세요';
console.log(str2.includes('hello')); // false

str.split()

split의 뜻을 보면 분할, 나뉘다, 분리하다라는 뜻을 갖고 있다.

split( )의 argument에 분리할 문자열이 들어간다.
그리고, 반환되는 값은 배열이 된다.
let str1 = 'JavaScript are the best language!';
let strSplit = str1.split(' '); //공백을 기준으로 줘서 split한다.
console.log(strSplit); // ["JavaScript", "are", "the", "best", "language!"]

str.substring(start, end)

substring(startIdx, endIdx)은 인자값에 시작 인덱스와 끝 인덱스를 넣어준다.

정해준 구간안에 있는 문자열을 반환한다.

주의해야 할 점은 뒤에 인자값으로 정해진 수의 바로 앞 인덱스까지만 값을 가져와서 반환한다.
let str1 = 'zxcvbnmasdfghjkl';
let str2 = str1.substring(3, 7); //3번째 문자부터 6번째 문자 의 값을 가져온다.(7번째는 포함하지 않는다.)
console.log(str2); // "vbnm"
문자열의 길이보다 긴 값을 지정해주면, 해당 문자열의 요소가 있는 곳까지의 값을 리턴한다.
let str3 = 'wefkhbsdmfnwenpojkxzc';
console.log(str3.length); // 21
console.log(str3.substring(10, 28)); // nwenpojkxzc
substring() 안에 전해지는 인자 값이 음수인 경우에는 0으로 취급된다.
let str4 = 'weoihfjsdlfknxcm';
console.log(str4.substring(-3, 5)); // weoih

str.slice()

slice( )는 위에서 살펴본 substring( )와 비슷하지만, 차이점을 가지고 있다.

slice( ) 메서드는 문자열의 일부를 추출하면서, 새로운 문자열을 반환한다.
let str = `I don't think of the past. The only thing that matters is the everlasting present.`
console.log(str.slice(27)); // The only thing that matters is the everlasting present.
slice(startIdx, endIdx)를 줘서 문자를 추출 할 수 있다.
let str = `Fashion is made to become unfashionable.`;
console.log(str.slice(5, 10)); // on is
slice()는 문자열로부터 텍스트를 추출하고 새 문자열을 반환하게 된다.
여기서 기존의 문자열은 새로 반환된 문자열에 영향을 받지 않는다.
let newStr = str.slice(0, 9);
console.log(newStr); // Fashion i
console.log(str); // Fashion is made to become unfashionable.
slice()에 음수 인덱스를 사용할 수 있다.

문자열의 끝에서부터 인덱스를 세게 된다.

아래의 코드를 보면 slice(-7, -3)을 음수 인덱스로 주고 있다.

이는 시작 인덱스를 찾기 위해 문자열의 끝에서부터 반대 방향으로 찾기 시작하는데, 맨 끝에서 7개를 세고 끝 인덱스를 찾기 위해 끝에서 3번째 전까지의 문자 값을 반환한다.
let str = 'Calendars are for careful people, not passionate ones.'

console.log(str.slice(-7, -3)); // e on

immutable

원본이 변하지 않음

모든 string method는 immutable이기 때문에 원본이 변하지 않는다.

뒤에서 배울거지만, array method는 immutable과 mutable의 여부가 중요하다

immutable한 데이터 값을 사용

immutable한 데이터 값을 사용하려면 새로운 변수에 할당해서 사용할 수 있다.

str.toUpperCase()

문자열을 대문자로 변환해준다.

let str1 = 'abcdefghijklmnopqrstuvwxyz';
console.log(str1.toUpperCase()); // ABCDEFGHIJKLMNOPQRSTUVWXYZ

str.toLowerCase()

문자열을 소문자로 변환해준다.

let str1 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
console.log(str1.toLowerCase()); // abcdefghijklmnopqrstuvwxyz

trim()

trim( )는 문자열의 양 끝의 공백을 제거해준다.

양 끝의 공백을 제거한 새로운 문자열을 반환한다.
let str = '     Hello JavaScript!!!       ';
console.log(str.trim()); //Hello JavaScript!!!