반응형
문자열
텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장된다.
자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16형식을 따른다.
따옴표의 종류
let single = '작은따옴표';
let double = "큰따옴표";
let backticks = `백틱`;- 작은따옴표와 큰따옴표는 기능상 차이가없다.
function sum(a, b) {
return a + b;
}
alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.- 템플릿 리터럴 방식
- 백틱으로 감싼 문자열 중간에 표현식${...}을 문자열 중간에 넣어주면 표현식을 삽입할 수 있다.
특수 기호
자바스크립트엔 줄 바꿈 문자를 비롯한 다양한 '특수' 문자들이 있다.
let guestList = "손님:\n * John\n * Pete\n * Mary";
alert(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함
손님:
* John
* Pete
* Mary- 모든 특수 문자는 이스케이프 문자 라고도 불리는 역슬래시 \로 시작한다.
| \n | 줄 바꿈 |
| \',\" | 따옴표 |
| \\ | 역슬래시 |
| \t | 탭 |
문자열의 길이
alert( `My\n`.length ); // 3- \n은 ‘특수 문자’ 하나로 취급되기 때문에 My\n의 길이는 3이다.
- <주의> 자바스크립트에서 str.length는 함수가 아니라 프로퍼티이다. 뒤에 괄호를 붙일 필요는 없다.
특정 글자에 접근하기
let str = `Hello`;
// 첫 번째 글자
alert( str[0] ); // H
alert( str.charAt(0) ); // H
// 마지막 글자
alert( str[str.length - 1] ); // o
alert( str[1000] ); // undefined
alert( str.charAt(1000) ); // '' (빈 문자열)- [pos]같이 대괄호를 이용하거나 , str.charAt(pos)메소드 사용하기, 위치는 0부터 시작한다.
- 최근에는 대괄호 이용방식을 사용하고 charAt은 하위 호환성을 위해 남아있는 메서드이다.
- 두 접근 방식의 차이는 반환할 글자가 없을때 []는 undefined, charAt은 빈 문자열을 반환한다.
for (let char of "Hello") {
alert(char); // H,e,l,l,o (char는 순차적으로 H, e, l, l, o가 됩니다.)
}- for..of를 사용하면 문자열을 구성하는 글자를 대상으로 반복 작업을 할 수 있다.
문자열의 불변성
let str = 'Hi';
str[0] = 'h'; // Error: Cannot assign to read only property '0' of string 'Hi'
alert( str[0] ); // 동작하지 않습니다.- 문자열은 수정할 수 없다. 따라서 문자열 중간 글자 하나를 바꾸려고하면 에러가 발생한다.
let str = 'Hi';
str = 'h' + str[1]; // 문자열 전체를 교체함
alert( str ); // hi- 이러한 문제를 피하려면 완전히 새로운 문자열을 하나 만든 다음, 이 문자열을 할당하면 된다.
대·소문자 변경하기
alert( 'Interface'.toUpperCase() ); // INTERFACE
alert( 'Interface'.toLowerCase() ); // interface
alert( 'Interface'[0].toLowerCase() ); // 'i'- toUpperCase() 소문자를 대문자로 변경
- toLowerCase() 대문자를 소문자로 변경
- 글자 하나의 케이스만 변경하는것도 가능하다.
부분 문자열 찾기 indexOf
let str = 'Widget with id';
alert( str.indexOf('Widget') ); // 0, str은 'Widget'으로 시작함
alert( str.indexOf('widget') ); // -1, indexOf는 대·소문자를 따지므로 원하는 문자열을 찾지 못함
alert( str.indexOf("id") ); // 1, "id"는 첫 번째 위치에서 발견됨 (Widget에서 id)- str.indexOf(substr, pos) 메서드
- pos에서부터 시작해 substr이 어디에 위치하는지 찾아준다. (pos는 선택적으로 사용할 수 있다)
- 원하는 부분 문자열을 찾으면 위치를 반환하고 그렇지 않으면 -1를 반환
문자열 전체돌며 부분 문자열 찾기
let str = 'As sly as a fox, as strong as an ox';
let target = 'as'; // as를 찾아봅시다.
let pos = 0;
while (true) {
let foundPos = str.indexOf(target, pos);
if (foundPos == -1) break;
alert( `위치: ${foundPos}` );
pos = foundPos + 1; // 다음 위치를 기준으로 검색을 이어갑니다.
}- 반복문이 하나씩 돌 때마다 검색 시작 위치가 갱신되면서 indexof가 새롭게 호출된다.
let str = "As sly as a fox, as strong as an ox";
let target = "as";
let pos = -1;
while ((pos = str.indexOf(target, pos + 1)) != -1) {
alert( `위치: ${pos}` );
}- 위와 동일한 동작을하는 코드
includes, startsWith, endsWith
alert( "Widget with id".includes("Widget") ); // true
alert( "Hello".includes("Bye") ); // false
alert( "Widget".includes("id") ); // true
alert( "Widget".includes("id", 3) ); // false, 세 번째 위치 이후엔 "id"가 없습니다.- str.includes(substr, pos)는 str에 부분 문자열 substr이 있는지에 따라 true나 false를 반환
- 두 번째 인수를 넘기면 해당 위치부터 부분 문자열을 검색한다.
alert( "Widget".startsWith("Wid") ); // true, "Widget"은 "Wid"로 시작합니다.
alert( "Widget".endsWith("get") ); // true, "Widget"은 "get"으로 끝납니다.- str.startsWith() - str이 특정 문장열로 시작하는지 여부확인
- str.endsWith() - str이 특정 문자열로 끝나는지 여부확인
부분 문자열 추출하기
let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', 0번째부터 5번째 위치까지(5번째 위치의 글자는 포함하지 않음)
alert( str.slice(0, 1) ); // 's', 0번째부터 1번째 위치까지(1번째 위치의 자는 포함하지 않음)
alert( str.slice(2) ); // ringify, 2번째부터 끝까지
alert( str.slice(-4, -1) ); // gif- str.slice(start [, end]) - 문자열의 strart부터 end까지(end는 미포함)을 반환한다.
- 두 번째 인수가 생략된 경우엔 명시한 위치부터 문자열 끝까지 반환
- start와 end는 음수가 될 수도 있고, 음수는 문자열 끝에서부터 카운팅 시작
let str = "stringify";
// 동일한 부분 문자열을 반환합니다.
alert( str.substring(2, 6) ); // "ring"
alert( str.substring(6, 2) ); // "ring"
// slice를 사용하면 결과가 다릅니다.
alert( str.slice(2, 6) ); // "ring" (같음)
alert( str.slice(6, 2) ); // "" (빈 문자열)- str.substring(start [, end]) - start와 end 사이의 문자열 반환
- slice와 아주 유사하지만 substring는 start값이 end보다 커도 되고, 인수로 음수를 허용하지 않는다. (음수는0처리)
let str = "stringify";
alert( str.substr(2, 4) ); // ring, 두 번째부터 글자 네 개
alert( str.substr(-4, 2) ); // gi, 끝에서 네 번째 위치부터 글자 두 개- str.substr(start [, length]) - start에서 시작해 length개의 글자를 반환
- substr은 끝 위치 대신에 길이를 기준으로 문자열을 추출한다는 점에서 위의 메소드들과 차이가 있다.
| 메서드 | 추출할 부분 문자열 | 음수 허용 여부(인수) |
| slice(start, end) | start부터 end까지 (end 미포함) | 음수 허용 |
| substring(start, end) | start와 end 사이 | 음수는 0으로 취급 |
| substr(start, length) | start부터 length개의 글자 | 음수 허용 |
⭐ 요약
- 백틱은 문자열을 여러 줄에 걸쳐 쓸 수 있게 해주고 문자열 중간에 ${...}를 사용해 표현식도 넣을수 있음
- 자바스크립트는 UTF-16을 사용해 문자열을 인코딩한다.
- \n (줄바꿈) 같은 특수 문자 사용가능
- 문자열에서 글자 하나 추출할때는 대괄호 [] 사용
- 부분 문자열을 얻으려면 slice() 나 substring()
- 소문자로 바꾸기 toLowerCase(), 대문자로 바꾸기 toUpperCase()
- indexOf로 부분 문자열의 위치 얻기
- 부분 문자열의 여부 확인 includes/startsWith/endsWith
- str.trim() – 문자열 앞과 끝의 공백 문자를 다듬어 줌(제거함)
- str.repeat(n) – 문자열을 n번 반복
반응형