[JavaScript] 문자열 메소드(String Method)
이번 시간에는 문자열과 관련된 여러가지 메소드를 배워볼 것이다.
우선 문자열은 '(작은 따옴표) , "(큰 따옴표) , `(백틱)을 사용하여 나타낼 수 있는데
html 코드 같은 경우는 작은 따옴표로 감싸는게 편하다.
태그 안에 큰 따옴표를 써야하는 상황이 있기 때문이다.
|
let html = '<div class="box_title">제목 영역</div>';
|
반면 영어로 된 문자열은 큰 따옴표로 감싸는게 편하다.
문자열 안에 작은 따옴표를 써야하는 상황이 있기 때문이다.
|
let desc = "It's 3 o'clock.";
|
백틱은 $와 중괄호 { } 를 사용해 변수를 표현하거나 표현식에 사용할 수 있다.
|
let name = 'Jane';
let result = `My name is ${name}`; //My name is Jane;
let add = `2 더하기 3은 ${2+3}입니다.`; // 2더하기 3은 5입니다.
|
또한 백틱은 여러줄을 표현할 수 있다.
|
let todayWeather = `오늘은 맑고 화창한 날씨가
계속 되겠습니다.
내일은 비소식이 있겠습니다.`;
|
만약 따옴표로 여러줄을 표현하려면 \(역슬레쉬)n을 사용해야 한다.
그리고 백틱처럼 줄 바꿈을 해서 사용할 수 없다.
여러줄을 나타내더라도 무조건 한줄로 써줘야한다.
|
let desc = '오늘은 맑고 \n 화장한 날씨가 \n 계속되겠습니다.';
|
1. length를 사용한 문자열 길이 구하기
우리는 배열의 길이를 구할 때 length를 사용해서 배열의 길이를 구했는데
length를 사용해서 문자열의 길이도 구할 수 있다.
|
let desc = '안녕하세요';
desc.length // 6
|
2. 특정 위치에 접근
또한 문자열도 배열처럼 특정 위치에 접근할 수 있다.
배열처럼 index는 0부터 시작하기 때문이다.
|
let desc = '안녕하세요';
desc[2] // '하
|
배열과 다른점은 특정 문자를 바꿀 수 없다는 것이다.
|
let desc = '안녕하세요';
desc[2] // '하
desc[4] = '용';
console.log(desc); // 안녕하세요
|
3. toUpperCase( ) / toLowerCase( ) 대 / 소문자 변경
toUpperCase는 모든 문자열을 대문자로, toLowerCase는 모든 문자열을 소문자로 바꿔준다.
|
let content = 'Hi guys. Nice to meet you';
content.toUpperCase(); // "HI GUYS. NICE TO MEET YOU"
content.toLowerCase(); // "hi guys. nice to meet you"
|
4. str.indexOf(text)
: 문자를 인수로 받아 몇번째에 위치하는지 알려준다.
마찬가지로 문자열의 인덱스는 0부터 시작한다.
|
let content = 'Hi guys. Nice to meet you';
content.indexOf('to'); // 14
|
하지만 문자열에 포함된 문자가 아니라면 -1을 반환한다.
그리고 같은 문자열이 반복된다면 첫번째에 해당하는 인덱스만 반환해준다.
|
let content = 'Hi guys. Nice to meet you';
content.indexOf('to'); // 14
content.indexOf('men'); // -1
|
아래의 함수는 실행이 될까??
|
let content = 'Hi guys. Nice to meet you';
if(content.indexOf('Hi')) {
console.log('Hi가 포함된 문장입니다.');
}
|
정답은 NO! 실행되지 않는다 ! !
왜냐하면 Hi는 문자열의 0번째에 위치하고 if 문에서 0은 false이고 조건절을 반환하지 않기 때문이다.
그래서 console.log를 찍고 싶으면 -1 보다 큰지 비교해줘야 한다.
|
if(content.indexOf('Hi') > -1) {
console.log('Hi가 포함된 문장입니다.');
}
|
5. str.slice(n, m)
: n부터 m까지의 문자열만 반환한다.
여기서 n은 시작점이고 m은 숫자를 넣지 않으면 문자열 끝까지,
양수면 그 숫자까지(포함하지 않음, 미만을 나타냄),
음수면 끝에서부터 센다.
|
let eng = 'abcdefg';
eng.slice(3); // "defg"
eng.slice(1, 3); // "bc"
eng.slice(2, -2); // "cde"
|
6. str.subString(n, m)
: slice와 마찬가지로 n과 m 사이의 문자열을 반환한다.
다른점은 m을 포함한다는 것이고, n과 m을 바꿔도 똑같은 값을 반환한다.
음수를 허용하지 않아서 음수를 0으로 인식한다.
|
let eng = 'abcdefg';
eng.substring(2, 5); // "cde"
eng.substring(5, 2); // "cde"
|
7. str.substr(n, m)
: subString과 비슷하게 생겼지만 동작 방식은 조금 다르다.
n이 시작인 것은 똑같지만 m이 종료점이 아닌 갯수를 나타낸다.
즉, n번째부터 m개를 반환하는 것이다.
|
let eng = 'abcdefg';
eng.substr(2, 4); // "cdef"
eng.substr(-4, 2); // "de"
|
8. str.trim( )
: 앞 뒤 공백을 제거하는 메소드이다.
|
let trimString = " coding ";
trimString.trim(); // "coding"
|
9. str.repeat(n)
: 문자열을 n번 반복하게 하는 메소드이다.
|
let sayHi = "Hello~";
sayHi.repeat(4); // "Hello~Hello~Hello~Hello~"
|
10. includes( )
: 인덱스로 문자열을 가져와서 비교하지 않고 문자열에 검사하고자 하는 문자가 있으면 true / false로 반환해주는 메소드이다.
|
let content = "오늘의 날씨는 맑음입니다.";
content.includes("날씨"); // true
content.includes("내일"); // false
|
숫자를 비교할 수 있는 것처럼 문자열도 비교할 수 있다.
"a" < "c" // true;
이유는 소문자 a는 10진법으로 바꾸면 97을, c는 99를 나타내고 있기 때문이다.
codePointAt을 사용하면 해당하는 문자열의 10진법 숫자를,
반대로 fromCodePoint를 사용하면 10진법 숫자에 해당하는 문자열을 알아낼 수 있다.
|
"a".codePointAt(0); // 97
String.fromCodePoint(97); // "a"
|
자 메소드를 배워봤으니 조금 간단한 예제를 풀어보자
|
let list = [
"01. 시작하는 말 ",
"02. JS의 역사",
"03. 자료형",
"04. 함수",
"05. 배열"
];
|
위의 리스트에서 숫자를 뺀 나머지 문자열만 가져와서 배열에 넣고싶다면 어떻게 해야할까??
|
1. 우선 빈 문자열을 만든다.
let newList = [];
2. 리스트의 길이만큼 반복하면서 for (let i = 0; i < list.length; i++) {
4. newList에 집어넣는다. newList.push(
3. list의 i 번째 인덱스에서 slice 4번부터 끝까지의 문자열을 가져와서 list[i].slice(4)); }
// 숫자들을 제외한 문자열이 다 잘 들어간 것을 확인할 수 있다.console.log(newList); // ["시작하는 말", "JS의 역사", "자료형", "함수형", "배열"]
|
두번째 예제로 금칙어가 있으면 금칙어가 있다고 알려주고 없으면 통과라고 알려주는 메소드를 만들어보자.
|
// 금칙어 : 치킨
function eatChicken(str) {
if(str.indexOf('치킨')) {
console.log('금칙어가 있습니다.');
} else {
console.log('통과~!!');
}
}
eatChicken('치킨 먹고싶다 !!!');
eatChicken('오 나도 치킨 먹고싶다!');
eatChicken('아.. 나는 그거 말고 피자');
|
이렇게 함수를 작성했을 때 원래 의도했던 데로 작동하는지 확인해보면
전혀 다르게 작동하는 것을 볼 수 있다.
|
eatChicken('치킨 먹고싶다 !!!'); // 통과~!!
eatChicken('오 나도 치킨 먹고싶다!'); // 금칙어가 있습니다.
eatChicken('아.. 나는 그거 말고 피자'); /// 금칙어가 있습니다.
|
이유는 첫번째 줄에서는 indexOf( )로 가져온 치킨의 인덱스가 0 이기 때문에
if(0)은 false여서 else에 있는 통과라는 문구를 반환하고
세번째 줄은 원래 문자열에 없는 문자들이기 때문에 -1을 반환하는데 if(-1)은 true이기 때문에
if 문 아래의 console.log( )를 반환해준다.
때문에 위에서 언급했었던 것처럼 -1보다 클 때로 비교하면 의도대로 결과가 나타난다.
|
function eatChicken(str) {
if(str.indexOf('치킨') > -1) {
console.log('금칙어가 있습니다.');
} else {
console.log('통과~!!');
}
}
eatChicken('치킨 먹고싶다 !!!'); // 금칙어가 있습니다.
eatChicken('오 나도 치킨 먹고싶다!'); // 금칙어가 있습니다.
eatChicken('아.. 나는 그거 말고 피자'); // 통과~!!
|
위의 함수는 includes로 사용하면 조금 더 간단하게 사용할 수 있다.
|
function eatChicken(str) {
if(str.includes('치킨')) {
console.log('금칙어가 있습니다.');
} else {
console.log('통과~!!');
}
}
eatChicken('치킨 먹고싶다 !!!'); // 금칙어가 있습니다.
eatChicken('오 나도 치킨 먹고싶다!'); // 금칙어가 있습니다.
eatChicken('아.. 나는 그거 말고 피자'); // 통과~!!
|
* 본 포스팅은 코딩앙마님의 자바스크립트 중급 강좌를 기반으로 작성한 글입니다.