JavaScript 기초4 문자열(string)

 

 

 

• 학습내용

 이번에 학습한 내용은 문자열이다. 문자열은 우리가 코딩을 할 때 가장 많이 다루는 타입 중 하나이다. 특히나 데이터를 다루는 분야에서는 말할 것도 없을 것이다. 문자열을 컴퓨터 프로그래밍과 형식 언어 이론에서의 정의를 살펴보면 "문자열은 기호의 순차 수열을 말하며, 스트링(string)이라고도 표현한다. 이러한 기호는 미리 정의된 집합이나 음소 문자에서 선택한다"라고 한다. 자바스크립트에서 문자열의 여러 특징을 살펴보겠다. 

 

•   문자열에 접근 할때는 인덱스를 통해서 접근한다.

let str = 'CordStates';
console.log(str[0]); // 'C'

 

•   접근은 가능하지만 인덱스로 접근하여 값을 변경할 수는 없다.

let str[0] = 'G';
console.log(str); // 'CodeStates'가 출력 문자열은 항상 read-only

 

•   ' + '연산자의 사용이 가능하다. 즉, 문자열끼리의 ' + '연산은 문자열끼리 합한다.

let str1 = 'Hello',
  str2 = ' World';
console.log(str1 + str2) // 'Hello World'

만약 문자열과 수를 +연산자로 합한다면 수 역시 문자열로 변환되어 결과를 반환한다.

let str = '1';
console.log(str + 7); // '17'

str1.concat(str2, str3) 메서드를 사용하여 문자열을 합할 수도 있다. 이 메서드의 경우 str1에 str2, str3를 더해준다.

 

•   length 속성을 사용하면 문자열의 개수를 반환한다.

let str = 'HelloWorld';
console.log(str.length); // 10

이 속성은 문자열뿐만아니라 배열에서도 사용 가능하다.

 

 다음으로 문자열에서 자주 사용되는 메서드에 대해서 살펴보자. 메서드란 자주 사용하는 함수를 프로그램이 저장하여 제공하는 내장 함수이다. 즉, 따로 함수를 정의하지 않아도 되는 프로그램 자체에서 제공하는 함수이다. 한 가지 주의할 점은 기본적으로 문자열 메서드는 immutable 하다는 것이다. 즉, 메서드를 이용해 반환된 값이 원래의 변수에 저장되지 않는다. 저장을 하려면 따로 변수를 지정해 메서드의 결괏값을 할당해주어야 한다.

 

•   str.indexOf(searchValue) : 이 메서드는 찾고자하는 문자열의 인덱스를 반환해준다. 앞에서부터 문자열을 검사하여 찾고자 하는 문자열의 첫 번째 인덱스를 반환한다. 만약 찾고자 하는 문자열이 문자열 내에 없으면 '-1'을 반환한다.

'Blue Whale'.indexOf('Blue'); // 0
'Blue Whale'.indexOf('blue'); // -1

유사한 메서드로 str.lastindexOf(serchValue)가 있는데 이 메서드는 뒤에서부터 찾고자하는 값의 인덱스를 찾아준다. 그 외 메서드 str.includes(searchValue)는 문자열의 존재 여부의 Boolean값을 반환하는 메서드이다.

'canal'.lastIndexOf('a'); // 3 뒤에서부터 찾지만 인덱스의 번호는 앞에서부터의 번호
'canal'.includes('a'); // true

 

•   str.split(seperator) : 문자열을 argument를 기준으로 분리해준다. 분리하면 문자열은 배열로 값을 반환하고 str.join() 메서드로 다시 하나의 문자열로 변환할 수 있다.

let str = 'Hello from the other side';
console.log(str.split(' ')); // ['Hello', 'from', 'the', 'other', 'side'] // 공백으로 분리하면서 배열로 반환함
console.log(str.split(' ').join(' ')) // join메서드는 배열의 모든 요소를 연결해 다시 하나의 문자열로 바꿔줌

 

•    str.substring(start, end) : start와 end에 인덱스를 넣어 인덱스 사이의 문자열을 반환한다.

let str = 'abcdefghij';
console.log(str.substring(0, 3)); // 'abc' 0부터 3이전까지의 값을 반환 
console.log(str.substring(3, 0)); // 'abc' start와 end가 바뀌어도 같은 값을 반환
console.log(str.substring(-1, 3)); // 'abc' 음수는 0으로 취급

str.slice(start, end)와 str.substr(start, length) 메서드 역시 유사한 메서드들 인데 3가지는 차이점이 있다. slice는 기본적으로 작동이 substring과 같다. 그러나 인수 start와 end의 자리가 바뀔 때 substring과 다르게 자동으로 자리를 변환해주지 않고 빈 값 ' '을 반환한다. 음수가 올 때 역시 substring의 경우 음수를 0으로 취급하지만 slice는 뒤에서부터 계산하여 그 인덱스를 입력한다. 

console.log(str.slice(-4, 7)); // 'fg' - (5, 7)과 같음

substr의 경우 substring과 slice와의 작동이 다르다. substr는 인수로 start를 받지만 두번째 인수는 length인 길이를 받는다. 즉, 시작부터 길이만큼의 문자열을 반환한다.

console.log(str.substr(0, 3)); // 'abc'

 

•   str.toLowerCase() / str.toUpperCase() : 문자열을 대문자나 소문자로 변환해준다. 이 메서드의 경우 argument가 따로 없다.

let str = 'hello world'
console.log(str.toUpperCase()); // 'HELLO WORLD'

 

•   그 외 trim, match, replace, 공백 문자 등 아주 많이 있다.

let str = '    Hello world!    ';
console.log(str.trim()); // "Hello world!"; , 양 끝의 공백을 제거함
let str = 'red is impressive' 
str.match('red'); // ["red", index: 0, input: "red is impressive", groups: undefined], 특정 문자열이 포함되어 있는지 확인함.
let str = 'Apple'
str.replace('A', 'B') // "Bpple", 특정 문자를 다른 문자로 치환해줌

 

\t	커서를 탭 만큼 이동시킴.
\r\n	커서를 해당 줄 처음으로 이동하고 다음 줄로 이동시킴.
\n	커서를 다음 줄로 이동시킴.
\b	커서를 한 칸 이동시킴.
\f	커서를 다음 페이지로 이동시킴.