자바스크립트 문자열 다루기

2020. 05. 01. 13:44 study/gardenist#javascript#string

자바스크립트의 문자열 타입인 String의 기능과 제공하는 함수들을 다뤄봅니다.

String.fromCharCode()

UTF-16의 문자 코드들을 전달하여 해당 문자 코드에 해당되는 문자로 변환하여 문자열을 반환합니다.

console.log(String.fromCharCode(189, 43, 190, 61));
// ½+¾= 출력

String.fromCodePoint()

유니코드 코드 포인트들을 전달하여 해당 유니코드 코드 포인드에 해당하는 문자로 변환되어 반환합니다.

console.log(String.fromCodePoint(44032));
// "가" 출력

String.prototype.chartAt(index)

index에 위치한 문자를 반환합니다.

const sentence = "동해물과 백두산이 마르고 닳도록";
const index = 5;

console.log(sentence.charAt(index)); // 백

// 아래는 같은 기능을 하는 인덱스 연산자입니다.
console.log(sentence[index]); // 백

String.prototype.charCodeAt(index)

index에 위치한 문자의 UTF-16의 문자 코드를 반환합니다.

2바이트 문자의 경우 charCodeAt과 codePointAt은 글자의 반환 값이 같습니다.

console.log('안녕하세요'.charCodeAt(2)); 
// 45397 출력

String.prototype.codePointAt(index)

index에 위치한 문자의 유니코드 코드 포인트를 반환합니다.

2바이트 문자의 경우 charCodeAt과 codePointAt은 글자의 반환 값이 같습니다.

console.log('안녕하세요'.codePointAt(2)); 
// 45397 출력

String.prototype.concat(string, [, …string들])

현재 문자열에 파라미터로 전달된 문자열들을 붙입니다.

문자열에 + 연산자로 문자열을 붙이는 것과 같습니다.

console.log('Hello,' + ' World!');
console.log('Hello,'.concat(' Worl', 'd', '!'));

String.prototype.includes(포함되어 있는지 확인할 문자열)

현재 문자열에 파라미터로 전달된 문자열이 있는지 확인합니다. 있다면 true, 없으면 false입니다.

console.log('Hello'.includes('ell')); // true 출력
console.log('Hello'.includes('h')); // false 출력 - 대소문자 구분

String.prototype.endsWith(찾을 문자열)

현재 문자열이 파라미터로 전달된 찾을 문자열로 끝나는지 확인합니다.

let fileName = "profile.png";

let isPngFile = fileName.endsWith(".png");
console.log(isPngFile); // true 출력

String.prototype.indexOf(찾을 문자열)

현재 문자열에서 찾을 문자열로 시작하는 부분의 인덱스를 반환합니다. 만약 찾을 수 없다면 -1을 반환합니다.

indexOf 함수는 인덱스를 앞에서부터 찾습니다.

let message = "Hello, World!";

console.log(message.indexOf('l')); // 처음으로 l이 나오는 인덱스인 2를 출력
console.log(message.indexOf('World')); // World의 시작 인덱스인 7을 출력
console.log(message.indexOf('안녕')); // 안녕은 없으므로 -1 출력

String.prototype.lastIndexOf(찾을 문자열)

현재 문자열에서 찾을 문자열로 시작하는 부분의 인덱스를 반환합니다. 만약 찾을 수 없다면 -1을 반환합니다.

lastIndexOf 함수는 이름과 같이 뒤에서부터 찾습니다.

let message = "Hello, World!";

console.log(message.indexOf('l')); // 뒤에서부터 처음으로 l이 나오는 인덱스인 10을 출력
console.log(message.indexOf('World')); // World의 시작 인덱스인 7을 출력
console.log(message.indexOf('안녕')); // 안녕은 없으므로 -1 출력

String.prototype.match(정규표현식)

전달된 정규표현식에 일치되는 문자열이 포함된배열을 반환합니다. (정규표현식은 별도로 다루도록 하겠습니다)

let phoneNumber = '010-1234-4567';

console.log(phoneNumber.match(/\d{4}/)); // 숫자 4개가 매치된 결과를 반환
// 결과 배열
// [ "1234" ]

// 정규표현식에 global(전체 검색) 옵션 추가
console.log(phoneNumber.match(/\d{4}/)); // 숫자 4개가 매치된 결과를 반환
// 결과 배열
// [ "1234", "4567" ]

String.prototype.padEnd(맞출 문자열의 길이 n, 채울 문자열)

문자열의 길이가 파라미터로 전달된 문자열의 길이 n보다 짧으면 문자열의 뒷쪽에 채울 문자로 문자열의 길이를 맞춥니다. 채울 문자를 전달하지 않으면 공백 문자로 채워집니다.

padEnd와 padStart가 있습니다.

console.log("1".padEnd(4)); // "1    "로 공백을 채워서 글자 길이를 4글자로 맞춤
console.log("1".padEnd(4, "*")); // "1***"

console.log("1".padEnd(4, "XY")); // "1XYX"

String.prototype.padStart(맞출 문자열의 길이 n, 채울 문자열)

문자열의 길이가 파라미터로 전달된 문자열의 길이 n보다 짧으면 문자열의 앞쪽에 채울 문자로 문자열의 길이를 맞춥니다. 채울 문자를 전달하지 않으면 공백 문자로 채워집니다.

console.log("1".padStart(4)); // "   1" 출력
console.log("1".padStart(4, "0")); // "0001" 출력

// 날짜 포맷을 맞추는 예제 (yyyy-MM-dd 형식)
let now = new Date();
let year = now.getFullYear(); 

// 1~9월은 한자리이므로 0을 pad해주기
// 자바스크립트 month는 0부터 시작하므로 1을 더해줌
let month = String(now.getMonth() + 1).padStart(2, "0"); 

// 1~9일은 한자리이므로 0을 pad해주기
// day는 1부터 시작함 ;;
let day = String(now.getDate()).padStart(2, "0");

let formatted = `${year}-${month}-${day}`;

console.log(formatted); // 2020-03-21 출력

참고자료