dolog

문자열 1 본문

JavaScript/자료구조와 자료형

문자열 1

dokite 2022. 7. 29. 01:30

JS에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따른다

 

따옴표

  • 문자열은 작은 따옴표(‘), 큰 따옴표(“), 백틱(`)으로 감쌀 수 있다

 

let single = ’single’;

let double = “double”;

let backticks = `backticks`;

 

백틱하면 뭐다 ? 템플릿 리터럴(template literal, `${…}`) 이다

  • {…} 안에 표현식을 넣어 문자열 중간에 쉽게 삽입 가능하다

 

let sum = (a, b) => a + b;

 

console.log(`1 + 2 = ${sum(1, 2)}.`); // 1+2=3

 

또한 문자열을 여러 줄에 걸쳐 작성할 수 있다

(❗️그러나 작은/큰 따옴표는 안된다(…방법은 있다))

 

let guestList = `guest:

* kim

* shim

* go

`;

 

console.log(guestList); // guest: * kim * shim * go

 

왜 백틱만 되는 걸까 ?

작은/큰 따옴표로 문자열을 나타내는 방식은 JS 초창기 부터 있었지만, 백틱은 그 이후에 만들어진 문법이라 문자열을 여러 줄에 걸쳐 작성할 수 있는 등 다양한 기능을 제공하기 때문이다

 

템플릿 리터럴에서 조금 더 딥한 부분은 템플릿 함수(template function = tagged template)이다

function `string` 같이 첫번째 백틱 앞에 function을 사용하면 표현식의 결과, 문자열 조각 등을 인수로 받아 자동으로 호출한다

(자주 사용하진 않는다고 한다 - 필요 시 검색해보도록 하자)

 

특수 기호(문자)

  • 모든 특수 기호는 이스케이프 문자(escape character) 인 \(역 슬래시)로 시작한다
  • \은 문자열을 정확하게 읽기 위한 용도로 만들어진 것이다(메모리에 저장X)
  • \은 문자열 내 따옴표를 넣을 때도 사용할 수 있다
  • 또는 문자열을 백틱으로 감싸고 따옴표를 필요한 곳에만 사용하는 방법도 있다

 

console.log( ‘ I\’m the Walrus ! ‘);

console.log( ` I’m the Walrus ! `); // \가 없어도 된다

 

 

*represent* 

  • 줄 바꿈 문자(newline character or line breaks) : \n

 

// 줄 바꿈 문자를 사용하면 작은/큰 따옴표를 사용해 여러 줄 작성이 가능하다 

let guestList = “guest: \n * kim\n * shim\n * go”;

 

console.log(guestList)

// guest:

 * kim

* shim

* go

//

 

백틱을 이용해서 여러 줄 문자열을 만든 것과 작은/큰 따옴표를 이용해 만든것은 표현 방식(\n을 쓰느냐 안쓰느냐)만 다를 뿐 차이가 없다 ➡️ 비교 시 true

 

그 외 특수 기호(문자)

  • \r : 운송 반환(carriage return), 단독으로 사용하지 않고 (\r\n) 조합으로 사용
  • \’ , \” : 따옴표
  • \\ : 역슬래시(를 보여주어야 할 때 사용)
  • \t : 탭
  • \b , \f , \v : 백스페이스(backspace), 폼 피드(Form Feed), 세로 탭(Vertical Tab), 요즘엔 거의 사용하지 않지만 호환성 유지를 위해 남아있다
  • \xXX : 16진수 유니코드 XX로 표현한 유니코드 기호 (ex) z = \x7A)
  • \uXXXX : UTF-16 인코딩 규칙을 사용하는 16진수 코드 XXXX로 표현한 유니코드 기호, 반드시 네 개의 16진수로 구성되어야 한다 (ex) © = \u00A9)
  • u{X….XXXXXX} : UTF-32로 표현한 유니코드 기호, 몇몇 특수한 글자는 두개의 유니코드 기호를 사용해 인코딩 하므로 4byte를 차지 ➡️ 긴 코드 삽입 가능

 

console.log(“\u00A9”); // ©

console.log(“\u{20331}”); // 佫, 중국어(긴 유니코드)

console.log(“\u{1F60D}); // 😍, 웃는 얼굴 기호(긴 유니코드)

 

문자열의 길이

  • length : 프로퍼티에 문자열 길이 저장

 

console.log(`My\n`.length); // `My\n`의 길이는 3

 

length는 프로퍼티

  • 숫자가 저장되는 프로퍼티 이므로 ()를 붙일 필요가 없다

 

특정 글자에 접근하기

  • 문자열 내 특정 위치(pos)에 있는 글자에 접근하려면 [ ] 또는 str.charAt() 매서드를 호출하자 : 위치는 0 부터 시작한다
  • [ ]를 더 많이 사용한다(str.charAt()도 호환성 유지로 남아있는 것)

 

let str = ‘Hello’;

 

console.log(str[0]); // H

console.log(str.charAt[0]); // H

 

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

 

// 둘의 차이는 반환할 글자가 없을 때 나타난다

 

console.log(str[1000]); // undefined

console.log(str.charAt[1000]); // ‘’(empty string)

 

for..of

  • 문자열을 구성하는 글자를 대상으로 반복 작업 가능

 

for (let char of “Hello”) {

console.log(char); // H,e,l,l,o ➡️ 하나씩 출력

}

 

문자열의 불변성

  • 문자열을 수정하려고 하면 에러가 난다 ➡️ 수정이 불가능 하다

 

let str = ‘Hi’;

 

str[0] = ‘h’;

console.log(str[0]); // TypeError: Attempted to assign to readonly property.

 

완전히 새로운 문자열을 하나 만들고 할당해주면 해결 가능

 

str = ‘h’ + str[1];

console.log(str); // hi

 

대/소문자 변경하기

  • toUpperCase() / toLowerCase() : 대문자 🔄 소문자

 

console.log(‘Hello’.toUpperCase()); // HELLO

console.log(‘Hello’.toLowerCase()); // hello

 

글자 하나 변경도 가능하다

 

console.log(‘Hello’[4].toUpperCase()); // HellO

'JavaScript > 자료구조와 자료형' 카테고리의 다른 글

배열  (0) 2022.08.01
문자열 2  (0) 2022.07.31
숫자형 2  (0) 2022.07.28
숫자형 1  (0) 2022.07.26
원시값의 메서드  (0) 2022.07.25