String
자바스크립트에서 String(문자열)은 문자열의 나열이다. 문자열은 작은 따옴표나 큰 따옴표로 둘러쌓인 문자들의 시퀀스이다. 또한 ES6에서 도입된 백틱(\`)을 사용하여 만들 수도 있다.const singleQuotedString = 'Hello, World!';
const doubleQuotedString = "Hello, World!";
const backtickString = `Hello, World!`;
console.log(singleQuotedString); // 출력: "Hello, World!"
console.log(doubleQuotedString); // 출력: "Hello, World!"
console.log(backtickString); // 출력: "Hello, World!"백틱(`)과 일반 따옴표와의 차이는 다음과 같다.
- 다중 라인 문자열 : 백틱은 여러 줄로 이루어진 문자열을 쉽게 작성할 수 있다. 이를 템플릿 리터럴이라 부르며, 여러 줄의 문자열을 작성할 때 \n 과 같은 이스케이프 문자를 사용하지 않아도 된다.
- 표현식 삽입 : 백틱 문자열 안에서 ${} 구문을 사용하여 변수나 표현식을 쉽게 삽입할 수 있다.
- 이스케이프 문자 사용의 유연성 : 일반 따옴표로 문자열을 작성할 때, 특정 문자를 이스케이프 해야하는 경우가 있다. 예를 들어 작은 따옴표 안에 작은 따옴표를 표현하려면 이스케이프해야하지만, 백틱 문자열에서는 이러한 이스케이프는 필요하지 않다.
String 메서드
String.fromCharCode()
지정된 유니코드 코드 포인트에 해당하는 문자열을 생성하는 String 객체 메서드. 하나 이상의 유니코드 포인트(숫자)를 인자로 받아 해당 코드 포인트에 해당하는 문자열을 반환한다.
String.fromCharCode(65); //"A"
String.fromCharCode(65, 66, 67); //"ABC"String.fromCodePoint()
하나 이상의 유니코드 코드 포인트(숫자)를 인자로 받아 해당 코드 포인트에 해당하는 문자열을 생성한다. 코드 포인트를 직접 지정하므로, 더 직관적인 방법으로 문자열을 생성할 수 있다. 또한 코드 포인트가 유효한 범위(0 에서 0x10FFF 사이의 정수) 에 있는지 검증하고 유효하지 않는 코드 포인트를 무시한다.
//문법
String.fromCodePoint(codePoint1, codePoint2, ..., codePointN);
//예시
const char = String.fromCodePoint(72, 101, 108, 108, 111);
console.log(char); // 출력: "Hello"indexOf()
문자열에서 특정 문자열 또는 문자의 첫번째 발생 위치(인덱스)를 반환한다. 만약 해당 문자열이나 문자를 찾지 못하면 -1을 반환한다.
const str = "Hello, World!";
const index = str.indexOf("World");
console.log(index); // 출력: 7 (첫 번째 'World'의 시작 위치)
//두 번째 인자로 시작 인덱스를 전달 -> 특정위치부터 검색 시작 가능
const str = "Hello, World! Hello, Universe!";
const index = str.indexOf("Hello", 10);
console.log(index); // 출력: 14 (두 번째 'Hello'의 시작 위치)lastIndexOf()
문자열에서 특정 문자열 또는 문자의 마지막 발생 위치(인덱스)를 반환한다. 만약 해당 문자열이나 문자를 찾지 못할 경우 -1을 반환한다.
const str = "Hello, World! Hello, Universe!";
const lastIndex = str.lastIndexOf("Hello");
console.log(lastIndex); // 출력: 14 (마지막 'Hello'의 시작 위치)
//시작 인덱스 전달 (문자열의 끝에서 역으로 검색 시작)
const str = "Hello, World! Hello, Universe!";
const lastIndex = str.lastIndexOf("Hello", 13);
console.log(lastIndex); // 출력: 0 (첫 번째 'Hello'의 시작 위치, 13번 인덱스 이전까지 역으로 검색)charAt()
문자열에서 지장헌 인덱스에 해당하는 문자를 반환한다. 인덱스는 0부터 시작하며, 지정된 인덱스가 없을 경우 빈 문자열을 반환한다.
const str = "Hello, World!";
const character = str.charAt(7);
console.log(character); // 출력: "W" (인덱스 7에 해당하는 문자)charCodeAt()
문자열에서 지정된 인덱스에 해당하는 문자의 유니코드 코드 포인트를 반환한다. 반환값은 0부터 65535까지의 정수로 지정된 인덱스에 문자열이 없을 경우 NaN을 반환한다.
const str = "Hello, World!";
const charCode = str.charCodeAt(7);
console.log(charCode); // 출력: 87 (인덱스 7에 해당하는 문자 'W'의 유니코드 코드 포인트)codePointAt()
문자열에서 지정된 위치의 유니코드 코드 포인트를 반환한다. 0부터 0x10FFFF까지의 정수를 반환하며, 대표적으로 4바이트로 표현되는 유니코드 코드 포인트를 올바르게 처리한다.
const str = "😊";
const codePoint = str.codePointAt(0);
console.log(codePoint); // 출력: 128522 (지정된 위치의 유니코드 코드 포인트)slice()
문자열의 지정된 부분을 추출한다. 시작인덱스부터 끝 인덱스의 이전 문자열을 반환한다. 끝 인덱스는 선택적이며, 지정하지 않을 경우 문자열의 끝까지 추출한다. 음수 값을 사용할 경우 문자열의 끝에서 역순으로 센다.
const str = "Hello, World!";
const sliced = str.slice(7, 12);
console.log(sliced); // 출력: "World" (인덱스 7부터 11까지의 부분 문자열)
//음수값 사용시
const str = "Hello, World!";
const sliced1 = str.slice(-6); // 끝에서부터 6개의 문자열을 추출
const sliced2 = str.slice(-12, -1); // 끝에서부터 -12번째부터 -2번째까지의 문자열을 추출
console.log(sliced1); // 출력: "World!"
console.log(sliced2); // 출력: "Hello, World"substring()
문자열의 지정된 부분을 추출한다. 시작 인덱스부터 끝 인덱스 이전까지의 문자열을 반환한다. 시작 인덱스와 끝 인덱스가 음수일 경우 0으로 취급된다. 끝 인덱스가 음수 또는 "0" 인경우 시작인덱스와 끝 인덱스가 서로 뒤바뀐다.
const str = "Hello, World!";
const subStringed = str.substring(7, 12);
console.log(subStringed); // 출력: "World" (인덱스 7부터 11까지의 부분 문자열)substr()
문자열의 지정된 위치부터 시작하여 지정된 길이의 문자열은 반환한다.
const str = "Hello, World!";
const subStr = str.substr(7, 5);
console.log(subStr); // 출력: "World" (인덱스 7부터 길이 5까지의 부분 문자열)split()
문자열을 특정 구분자(separator)를 기준으로 분할하여 배열을 반환한다. 구분자가 지정되지않으면, 전체 문자열이 하나의 요소로 들어간 배열을 반환한다.
const str = "apple,banana,orange";
const fruits = str.split(",");
console.log(fruits); // 출력: ["apple", "banana", "orange"] (쉼표를 기준으로 분할된 배열)
//정규 표현식 사용
const str = "apple ban,banana or,ange";
const fruits = str.split(/\s|, /);
console.log(fruits); // 출력: ["apple", "banana", "orange"] (공백 또는 쉼표와 공백을 기준으로 분할된 배열)concat()
문자열을 합쳐서 새로운 문자열을 생성한다. 원래 문자열을 변경하지 않고, 새로운 문자열을 반환한다.
//기본 구문
str.concat(string1, string2, ..., stringN)
const str1 = "Hello, ";
const str2 = "World!";
const combinedString = str1.concat(str2);
console.log(combinedString); // 출력: "Hello, World!"
const greeting = "Hello";
const name = "Alice";
const punctuation = "!";
const fullGreeting = greeting.concat(", ", name, punctuation);
console.log(fullGreeting); // 출력: "Hello, Alice!"toUpperCase()
문자열의 모든 문자를 대문자로 변환한 새로운 문자열을 반환한다. 원래 문자열을 변경하지 않고, 새로운 문자열을 반환한다.
const str = "Hello, World!";
const upperCaseStr = str.toUpperCase();
console.log(upperCaseStr); // 출력: "HELLO, WORLD!"toLowerCase()
문자열의 무든 문자를 소문자로 변환한 새로운 문자열을 반환한다. 원래 문자열을 변경하지 않고, 새로운 문자열을 반환한다.
const str = "Hello, World!";
const lowerCaseStr = str.toLowerCase();
console.log(lowerCaseStr); // 출력: "hello, world!"trim()
문자열 양 끝의 공백(스페이스, 탭, 줄 바꿈 등)을 제거한 새로운 문자열을 반환한다.
const str = " Hello, World! ";
const trimmedStr = str.trim();
console.log(trimmedStr); // 출력: "Hello, World!"search()
정규 표현식과 매치되는 첫번째 문자열의 인덱스를 반환하며, 일치하는 문자열을 찾지 못할 경우 -1을 반환한다.
const str = "Hello, World!";
const index = str.search(/World/);
console.log(index); // 출력: 7 (일치하는 문자열 'World'의 시작 인덱스)replace()
지정된 패턴 또는 문자열을 새로운 문자열로 대체한 결과를 반환한다.
const str = "Hello, World!";
const newStr = str.replace("World", "Universe");
console.log(newStr); // 출력: "Hello, Universe!" (기존 문자열에서 'World'를 'Universe'로 대체)match()
정규표현식과 매치되는 문자열의 배열을 반환한다. 일치하는 결과가 없을 경우 'null'을 반환한다.
const str = "Hello, World!";
const matched = str.match(/o/g);
console.log(matched); // 출력: ["o", "o"] (정규 표현식과 일치하는 'o' 문자열을 모두 찾아 배열로 반환)includes()
문자열에 특정 문자열이 포함되어있는지 여부를 확인하여 true 또는 false를 반환한다.
const str = "Hello, World!";
const includesWorld = str.includes("World");
console.log(includesWorld); // 출력: true (문자열에 'World'가 포함되어 있음)startsWith()
주어진 문자열이 특정 문자열로 시작하는지 여부를 확인하여 true 또는 false를 반환한다. 두 번째 매개변수로 시작위치를 지정할 수 있다.
const str = "Hello, World!";
const startsWithHello = str.startsWith("Hello");
console.log(startsWithHello); // 출력: true (문자열이 'Hello'로 시작함)
//시작 위치 지정
const str = "Hello, World!";
const startsWithWorld = str.startsWith("World", 7);
console.log(startsWithWorld); // 출력: true (인덱스 7에서 시작하는 문자열이 'World'로 시작함)endsWith()
주어진 문자열이 특정 문자열로 끝나는지 여부를 확인하여 true 또는 false를 반환한다.
const str = "Hello, World!";
const endsWithWorld = str.endsWith("World!");
console.log(endsWithWorld); // 출력: true (문자열이 'World!'로 끝남)toLocaleUpperCase()
문자열을 현재 사용중인 로케일에 따라 대문자로 변환한 새로운 문자열을 반환한다.
const str = "Hello, World!";
const upperCaseStr = str.toLocaleUpperCase();
console.log(upperCaseStr); // 출력: "HELLO, WORLD!" (현재 로케일에 따라 대문자로 변환된 문자열)toLocaleLowerCase()
문자열을 현재 사용중인 로케일에 따라 소문자로 변환한 새로운 문자열을 반환한다.
const str = "Hello, World!";
const lowerCaseStr = str.toLocaleLowerCase();
console.log(lowerCaseStr); // 출력: "hello, world!" (현재 로케일에 따라 소문자로 변환된 문자열)localeCompare()
두 문자열을 사용 중인 로케일에 따라 비교한다. 두 문자열이 동일하면 0을 반환하고, 첫 번째 문자열이 두 번째 문자열보다 사전적으로 앞에오면 음수를, 뒤에오면 양수를 반환한다.
const str1 = "apple";
const str2 = "banana";
const result = str1.localeCompare(str2);
console.log(result); // 출력: 음수 (str1이 str2보다 사전적으로 앞에 위치함)normaize()
문자열에 포함된 유니코드 정규화 형식을 지정된 형식으로 변환한다. 주로 유니코드 문자열을 정규화하여 문자열을 비교하거나 검색할 때 사용한다.
const str = "Café";
const normalizedStr = str.normalize('NFD'); // NFD 형식으로 정규화
console.log(normalizedStr); // 출력: "Café" (다양한 유니코드 문자를 정규화한 문자열)repeat()
문자열을 주어진 횟수반큼 반복하여 새로운 문자열을 반환한다.
const str = "Hello, ";
const repeatedStr = str.repeat(3);
console.log(repeatedStr); // 출력: "Hello, Hello, Hello, " (원래 문자열을 3번 반복한 문자열)toString()
String 객체를 문자열로 변환한 값을 반환한다. 자바스크립트의 모든 데이터 타입은 해당 데이터 타입에 대한 문자열 표현을 가지고 있으며, 객체나 숫자, 불리언 등을 문자열로 변환할 때 자주 사용된다.
const num = 42;
const str = num.toString();
console.log(str); // 출력: "42" (숫자 42를 문자열 "42"로 변환)valueOf()
String 객체를 원시 문자열 값으로 반환한다.
const strObject = new String("Hello");
const primitiveStr = strObject.valueOf();
console.log(primitiveStr); // 출력: "Hello" (String 객체를 원시 문자열 값으로 변환)요약
| 메서드 | 설명 |
|---|---|
| String.fromCharCode() | 쉼표로 구분되는 일련의 유니코드에 해당하는 문자들로 구성된 문자열을 반환함 |
| String.fromCodePoint() | 쉼표로 구분되는 일련의 코드 포인트에 해당하는 문자들로 구성된 문자열을 반환함 |
| indexOf() | 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함 |
| lastIndexOf() | 특정 문자나 문자열이 마지막으로 등장하는 위치의 인덱스를 반환함 |
| charAt() | 전달받은 인덱스에 위치한 문자를 반환함 |
| charCodeAt() | 전달받은 인덱스에 위치한 문자열의 UTF-16 코드를 반환함 |
| charPointAt() | 전달받은 인덱스에 위치한 문자의 유니코드 코드 포인트를 반환함 |
| slice() | 전달받은 시작 인덱스로부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함 |
| substring() | 전달받은 시작 인덱스로부터 종료 인덱스 바로 앞까지의 문자열을 추출한 새 문자열을 반환함 |
| substr | 전달받은 시작 인덱스로부터 길이만큼의 문자열을 추출한 새로운 문자열을 반환함 |
| split() | 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환함 |
| concat() | 전달 받은 문자열을 결합한 새로운 문자열을 반환함 |
| toUpperCase() | 모든 문자를 대문자로 변환한 새로운 문자열을 반환함 |
| toLowerCase() | 모든 문자를 소문자로 변환한 새로운 문자열을 반환함 |
| trim() | 양 끝에 존재하는 공백과 모든 줄 바꿈 문자를 제거한 새로운 문자열을 반환함 |
| search() | 인수로 전달받은 정규 표현식에 맞는 문자나 문자열이 처음으로 등작하는 위치의 인덱스를 반환함 |
| replace() | 인수로 전달받은 패턴에 맞는 문자열을 대체 문자열로 변환한 새로운 문자열을 반환함 |
| match() | 인수로 전달받은 정규 표현식에 맞는 문자열을 찾아서 하나의 배열로 반환함 |
| includes() | 인수로 전달받은 문자나 문자열이 포함되어있는지 검사한 후 그 결과를 boolean값으로 반환함 |
| startsWith() | 인수로 전달받은 문자나 문자열로 시작되는 지를 검사한 후 그 결과를 boolean 값으로 반환함 |
| endsWith() | 인수로 전달받은 문자나 문자열로 끝나는지를 검사한 후 그 결과를 boolean 값으로 반환함 |
| toLocaleUpperCase() | 영문자뿐만 아니라 모든 언어의 문자를 대문자로 변환한 새로운 문자열을 반환함 |
| toLocaleLowerCase() | 영문자뿐만 아니라 모든 언어의 문자를 소문자로 변환한 새로운 문자열을 반환함 |
| localeCompare() | 인수로 전달받은 문자열과 정렬 순서로 비교하여 그 결과를 정수로 반환함 |
| normalize() | 해당 문자열의 유니코드 표준화 양식을 반환함 |
| repeat() | 해당 문자열을 인수로 전달받은 횟수만큼 반복하여 결합한 새로운 문자열을 반환함 |
| toString() | String 인스턴스의 값을 문자열로 반환함 |
| valueOf | String 인스턴스의 값을 문자열로 반환함 |
