1. String 객체
String 객체는 문자열의 생성자로, 자바스크립트에서 문자열을 다룰 때 유용한 프로퍼티와 함수를 제공한다.
String 객체를 생성하는 방법은 세 가지가 있다.
String() 생성자를 사용하는 방법
문자열 리터럴을 사용하는 방법
템플릿 리터럴을 사용하는 방법
1.1 String() 생성자로 생성하기
String(thing) 의 형태로 생성한 String()은 문자열이 된다. 매개변수로 오는 값(thing)을 문자열로 바꿔준다.
만약 new 키워드를 사용하면 String()은 객체가 된다.
let str = String(15000);
console.log(typeof str); // string
let str2 = new String(15000);
console.log(typeof str2); // object1.2 문자열 리터럴로 생성하기
문자열 리터럴은 작은 따옴표(' ') 또는 큰 따옴표(" ")로 문자열을 감싸 만드는 것이다.
let str = "ABCDE";
let str2 = 'ABCDE';
console.log(typeof str); // string
console.log(typeof str2); // string
console.log('A'==="A"); // true1.3 템플릿 리터럴로 생성하기
ES6 이후 템플릿 리터럴을 사용하여 문자열을 생성할 수 있다고 한다. 큰 따옴표나 작은 따옴표 대신 백틱(Backtick) 기호 (` `)를 사용해서 나타낸다. 또한 placeholder를 사용할 수 있다.
let str = `I can make string
with template
literals`
/*I can make string
with template
literals */
let str2 = "I can make string \n" +
" with template \n" +
" literals";
/*I can make string
with template
literals */따옴표를 사용한 문자열과 다르게 백틱을 사용한 문자열은 여러 줄을 한 번에 나타낼 수 있다.
따옴표로 감싼 상태에서 엔터키로 줄을 바꾸어 출력하면 에러 메시지가 뜬다.
2. 제공 함수
2.1 length
문자열 길이를 반환하는 함수이다.
let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let sln = txt.length; // 262.2 indexOf()
문자열 안에 특정 문자열이 존재하는지 찾고, 있다면 찾는 문자열이 시작되는 인덱스 값을 반환하는 함수이다. 만약 특정 문자열이 존재하지 않으면 -1을 반환한다.
let str = "Happy new year in year 2022!";
let pos = str.indexOf("year"); // 10특정 문자열이 2개 이상 포함되어 있는 경우엔 먼저 나오는 문자열의 인덱스 값만 리턴한다.
2.3 lastIndexOf()
특정 문자열을 찾는 기능은 indexOf()와 동일하지만 특정 문자열이 2개 이상 포함되어 있는 경우에 제일 마지막에 나오는 문자열의 인덱스를 반환하는 함수이다. 마찬가지로 특정 문자열이 존재하지 않으면 -1을 반환한다.
let str = "Happy new year in year 2022!";
let pos = str.lastIndexOf("year"); // 18indexOf()나 lastIndexOf() 모두 첫 번째 파라미터에는 찾고자 하는 문자열, 두 번째 파라미터에는 문자열을 찾기 시작할 인덱스 값을 줄 수 있다.
let str = "Happy new year in year 2022!";
let pos = str.indexOf("year", 23); // 23번째 인덱스부터 찾는다. 결과는 -12.4 slice()
파라미터로 시작 위치와 종료 위치를 주면 해당 부분을 잘라내서 반환하는 함수이다.
let str = "Apple, Banana, Kiwi";
let res = str.slice(7, 13); // Banana두 번째 파라미터인 종료 위치를 생략하면 시작 위치부터 문자열 끝까지 잘라내서 반환한다.
let str = "Apple, Banana, Kiwi";
let res = str.slice(7); // Banana, Kiwi첫 번째 파라미터인 시작 위치를 음수 값으로 주면, 문자열의 끝에서부터 거꾸로 읽는다.
(가장 마지막 알파벳 i가 -1이다.)
let str = "Apple, Banana, Kiwi";
let res = str.slice(-12); // Banana, Kiwi2.5 substring()
slice()와 같은 기능이다. 다만 첫 번째 파라미터로 음수 값을 줄 수 없다는 차이만 있다.
let str = "Apple, Banana, Kiwi";
let res = str.substring(7, 13); // Banana2.6 substr()
slice()와 아주 유사하다. 다만 두 번째 파라미터가 종료 위치가 아닌 첫 번째 파라미터부터 잘라낼 문자의 길이다.
let str = "Apple, Banana, Kiwi";
let res = str.substr(7, 6); // Banana두 번째 파라미터를 생략하면 시작 위치부터 문자열 끝까지 반환한다.
let str = "Apple, Banana, Kiwi";
let res = str.substr(7); // Banana, Kiwi첫 번째 파라미터를 음수 값으로 주면 문자열의 끝에서부터 거꾸로 읽는다.
2.7 replace()
문자열 내의 특정 문자열을 지정한 문자열로 바꾸는 함수이다. 바꾸려는 문자열이 2개 이상 있어도 처음 나온 문자열만 바꾼다.
let str = "Welcome to Seoul and Seoul";
let res = str.replace("Seoul", "NewYork"); // Welcome to NewYork and Seoul또한 대소문자를 구별한다. 따라서 특정 문자열이 없다면 문장은 바뀌지 않는다.
let str = "Welcome to Seoul and Seoul";
let res = str.replace("SEOUL", "NewYork"); // Welcome to Seoul and Seoul대소문자 구별 없이 사용하거나 해당하는 모든 문자를 바꾸고 싶다면 정규식을 사용해야 한다.
let str = "Welcome to Seoul and Seoul";
let res = str.replace("/SEOUL/i", "NewYork"); // Welcome to NewYork and Seoul첫 번째 파라미터를 /(특정 문자열)/i 로 입력하면 대소문자의 구별이 없어진다. i는 insensitive의 약자이다.
let str = "Welcome to Seoul and Seoul";
let res = str.replace("/Seoul/g", "NewYork"); // Welcome to NewYork and NewYork첫 번째 파라미터를 /(특정 문자열)/g 로 입력하면 모든 문자열을 바꿀 수 있다. g는 global의 약자이다.
2.8 toUpperCase(), toLowerCase()
toUpperCase() 함수는 문자열을 모두 대문자로 바꾼다.
let txt1 = "Hello World!";
let txt2 = txt1.toUpperCase(); // HELLO WORLD!toLowerCase() 함수는 문자열을 모두 소문자로 바꾼다.
let txt1 = "Hello World!";
let txt2 = txt1.toLowerCase(); // hello world!2.9 concat()
concat() 함수는 2개 이상의 문자열을 하나로 합치는 함수이다.
let txt1 = "Hello";
let txt2 = "World";
let txt3 = txt1.concat(" ", txt2); // Hello World
let txt4 = "Hello" + " " + "World!"; // Hello World!
let txt5 = "Hello".concat(" ", "World", "!"); // Hello World!2.10 trim()
trim() 함수는 문자열의 앞, 뒤 공백을 모두 제거하는 함수이다.
let str = " Hello World! ";
console.log(str.trim()); // Hello World!2.11 padStart(), padEnd()
padStart() 함수는 문자열 앞에 지정한 문자를 지정한 길이만큼 추가하는 함수이다.
첫 번째 파라미터는 문자열의 총 길이, 두 번째 파라미터는 추가할 문자이다.
let str = "5";
str = str.padStart(4, 0); // 0005총 길이가 4가 되어야 하므로 5를 제외하고 0이 3개 붙었다.
padEnd()는 문자열 뒤에 지정한 문자를 지정한 길이만큼 추가한다.
파라미터는 위와 동일하다.
let str = "5";
str = str.padEnd(4, 0); // 50002.12 charAt()
charAt() 함수는 문자열에서 특정 인덱스의 문자를 반환하는 함수이다.
let str = "Hello World!";
str.charAt(1); // e인자를 생략하면 기본 값으로 첫 번째 문자를 반환한다.
2.13 charCodeAt()
charCodeAt() 함수는 문자열에서 특정 인덱스의 문자의 유니코드 값을 반환하는 함수이다.
let str = "Hello World!";
str.charAt(1); // 101유니코드 테이블 주소: https://unicode-table.com/en/
해당 문자 위에 커서를 올리면 유니코드 값을 알 수 있다.
2.14 split()
split() 함수는 문자열 내의 특정 구분자를 기준으로 문자열을 분리해서 배열로 반환하는 함수이다.
let str = "2022-01-16";
console.log(str.split("-")); // [ '2022', '01', '16' ]2.15 startsWith(), endsWith()
startsWith() 함수는 문자열이 파라미터로 전달한 문자열로 시작하는지 확인하는 함수이다.
let url = "http://velog.io"; // 올바른 형식의 url
if(url.startsWith("http://") || url.startsWith("https://")) {
console.log("올바른 형식의 url");
} else {
console.log("잘못된 형식의 url");
}endsWith() 함수는 문자열이 파라미터로 전달한 문자열로 끝나는지 확인하는 함수이다.
let file = "js.pdf"; // pdf 파일입니다.
if(file.endsWith(".pdf")) {
console.log("pdf 파일입니다.");
} else {
console.log("기타 파일입니다.");
}굉장히 다양한 문제 해결 상황에서 위 함수들을 사용할 수 있을 것 같다. 특히 문자열을 다루는 경우가 굉장히 많기 때문에 잘 알아두면 좋을 것 같다.
3. 참고자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
도서 바닐라 자바스크립트
