28. 자료구조 - 문자열

Chipmunk_jeong·2021년 3월 7일
0

TIL

목록 보기
28/62
post-thumbnail

자바스크립트는 다른 언어와 다르게 문자하나와 문자열을 구분하는 자료형은 없다.
길이에 상관없이 문자열(string)으로 저장된다.
문자열은 페이지 인코딩과 상관없이 항상 UTF-16형식을 따른다.


따옴표

문자열은 큰 따옴표, 작은 따옴표, 백틱으로 감싸여 표현한다.

let single = '안녕';
let double = "안녕";
let backtick = `안녕`;

작은 따옴표와 큰 따옴표는 기능상 차이는 없다.
하지만 백틱은 특별한 기능이 존재한다.
${...} 이런식으로 백틱 내에서 달러와 중괄호로 감싸준 뒤 안에 변수나 또는 표현식을 사용한다면 표현식의 결과값이 삽입된다.
이것을 문자열 템플릿이라고 한다.

let name = 'quakka';
let age = 29;

console.log(`저의 이름은 ${name}이고, 내년에는 ${age+1}살 입니다.`);

또한 백틱을 사용하면 문자열을 여러줄 작성할 수 있다.

let str = `<메뉴>
- 아메리카노
- 카페라떼
- 흑당라떼
- 에스프레소`

console.log(str);

작은 따옴표나 큰 따옴표는 이런식으로 줄바꿈을 자유롭게 하지 못한다.
\n를 이용하여 줄바꿈은 가능하지만 백틱을 사용하면 더 쉽게 사용할 수 있다.


특수 기호

위에서 말했듯이 \n을 사용하면 여러줄을 만들어줄 수 있다.
이 처럼 자바스크립트에서는 문자열에서 사용할 수 있는 여러 특수기호를 지원한다.

특수 문자설명
\n줄 바꿈
\r캐리지 리턴
\', \"따옴표를 문자로 표시
\\역슬레쉬를 문자로 표시
\t
......등등

모든 특수 문자는 이스케이프 문자라고 불리는 \로 시작한다.


length 프로퍼티

문자열에 사용할 수 있는 length프로퍼티가 있다.
이것은 해당 문자열의 길이값을 담고있다.
문자열은 원시타입이라 프로퍼티가 있을까 싶지만
앞에서 배웠던 wrapper object를 생각하면
문자를 오브젝트로 감싸는 래퍼 오브젝트로 자동 변환되어 사용되는 것 같다.
즉, length를 사용할 때는 wrapper 오브젝트를 통해 오브젝트로 잠시 감싸주었다가 length의 값을 구한뒤 그 역활을 다했을때 다시 원시타입만이 남아있지 않을까 예상된다.

let word = 'hello';
console.log(word.length);

Indexing

문자열에서 특정 위치에 있는 문자에 접근할 수 있다.
문자열에 인덱스를 통하여 0부터 해당 문자열의 끝 인덱스까지 대괄호를 이요하여 접근하게되면 해당 위치의 문자가 반환된다.

let str = 'hello';

console.log(str[0]); // 'h'
console.log(str[str.length-1])); // 'o'

접근하려는 위치에 글자가 없는 경우에는 undefined가 반환된다.

let str = 'abc';
console.log(str[22]); // undefined

문자열의 불변성

엄격모드에서 문자열을 변경하려고 하면 에러가 난다.

let str = 'abc';

str[0] = 'z'; // Error

문자열은 변경이 불가능한 불변성 타입이다.
변수에 새로운 값을 재할당해 줄때도
원래 있던 데이터는 사라지고 새로운 값이 덮어쓰기가 된다.

let str = 'hi';

let str = 'hello'; 
// 원래있던 hi의 메모리를 가르키는것이아닌 
// 새로운 메모리주소에 'hello'를 할당하고 그 메모리를
// 가르킴. 원래 존재하던 'hi'는 접근 가능한 방법이 사라져
// 가비지 컬렉션에 의해 삭제됨

대소문자 변경

toLowerCase(), toUpperCase()를 통하여 대소문자 변경이 가능하다.

let str = 'Hello, World!';

console.log(str.toLowerCase()); // 'hello, world'
console.log(str.toUpperCase()); // 'HELLO, WORLD'

부분 문자열 찾기

문자열에서 특정한 부분의 문자열을 찾는 방법이 이다.

  • str.indexOf(findStr, pos);
    이 메서드는 문자열 str의 pos(Index)에서부터 시작해, 부분 문자열 findStr을 찾아 어디에 위치해 있는지 인덱스로 반환해준다. 만약 해당 문자열이 존재하지 않는다면 -1을 반환한다.
let str = 'hello! world';
let str2 = 'abcd, aefg';
console.log(str.indexOf('world')); // 7
console.log(str.indexOf('a', 2)); // 6
  • str.includes(findStr);
    이 메서드는 str에 findStr이 있다면 true 없다면 false가 찍힌다.
console.log('hello'.includes('h')); // true
  • str.slice(startIndex [, endIndex])
    문자열에서 startIndex부터 endIndex까지 추출하여 반환한다.
    startIndex 이상 endIndex 미만
let str = 'abcdefg';
console.log(str.slice(0, 2)); // 'ab' 
console.log(str.slice(2)); // 'cdefg' 매개변수가 1개일 때 해당 인덱스부터 끝까지 반환

// 매게변수가 음수일 수 있다.
console.log(str.slice(-3, -1)); //
뒤에서 세번째부터 뒤에서 첫번째 전까지
  • str.substring(start [, end])
    이 메서드 또한 slice와 동일한 기능을 한다.
    차이점은 -가 붙은 인덱스는 0으로 초기화가 되고 범위를 넘어서는 인덱스는 자동으로 마지막 인덱스로 초기화 된다.
    또한 start가 end보다 큰 수 일경우 둘의 자리를 바꿔주는 기능이 있다.
let str = 'abcdefg';
console.log(str.substring(0, 2)); // 'ab'
console.log(str.substring(-1, 3)); // 'abc' 자동으로 -1이 0으로 초기화됨
console.log(str.substring(4, 0)); // 'abcd' 자동으로 둘의자리가 바껴 0, 4로 됨

보통 slice를 사용하면 마이너스 인덱스도 사용할 수 있고 좀더 유연하게 작동하여 더 많이 사용한다.

subStr이라는메서드도 있지만 잘 사용하지 않는다.

profile
Web Developer

0개의 댓글