문자열 메소드(String methods)

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

문자열 string 은 작은 따옴표, 큰따옴표, 백틱으로 묶어줍니다.

// html 은 중간에 큰 따옴표가 들어가면 작은 따옴표로 감싸는 게 편합니다.
let html = '<div class="box_title">제목</div>';

// 아래 문장은 큰 따옴표로 묶는 게 편하고
let desc = "It's 3 o'clock"

// 백틱은 달러와 중괄호를 이용해 변수를 표현하거나 표현식을 쓸 수 있습니다.
let name = 'Mike';
let result = `My name is ${name}`
let add = `2 더하기 3은 ${2+3} 입니다.`

// 백틱은 여러 줄을 줄바꿈해서 쓸 수 있습니다. 기존 따옴표는 \n 을 써야 함
let desc = `여러 줄을 줄바꿈해서
쓸 수 있다. `;

배열에서 요소의 갯수를 확인하듯이 문자열도 문자의 갯수를 확인할 수 있습니다. 가입할 때 아이디나 비밀번호를 몇자 이상, 이하로 체크할 때 사용합니다.

let desc = '안녕하세요.';
desc.length // 6

배열처럼 대괄호 숫자로 특정 문자에 접근할 수 있습니다. 대신 배열처럼 한 요소만 수정할 순 없습니다.

let desc = '안녕하세요.';
desc[1] // '녕'

영어의 경우 toUpperCase() toLowerCase() 로 모든 영문을 대문자 혹은 소문자로 바꿀 수 있습니다.

str.indexOf(text); 는 해당 문자가 몇번째 위치에 있는지 보여줍니다. 찾는 문자가 없다면 -1 을 반환합니다. 포함된 문자가 여러개라면 첫번째 문자만 확인하고 반환합니다.

let desc = "Hi guys. Nice to meet you.";
desc.indexOf('to'); // 14

첫번째 문자는 0 이고, 이건 false 이기 때문에 if 문을 쓸 때 주의해야 합니다.

if(desc.indexOf('Hi')){ // Hi 는 첫번째 문장이라서 0, 실행 안됨
	console.log('Hi가 포함된 문장');
}
// 그래서 이렇게 -1 보다 큰가로 비교하기도
if(desc.indexOf('Hi') > -1)

str.slice(n, m) 은 특정 범위의 문자열만 뽑아냅니다. n 부터 m 까지 문자열을 반환하는데, m 이 없다면 문자열 끝까지 반환하고, 양수면 그 숫자 앞까지 음수면 끝에서부터 셉니다.

let desc = "abcdefg";

desc.slice(2) // "cdefg"
desc.slice(0, 5) // "abcde"
desc.slice(2, -2) // "cde"

str.substring(n, m) 도 n 과 m 사이 문자열을 반환하는데, 두 개의 순서가 바뀌어도 동작합니다. 음수는 0으로 인식합니다.

let desc = "abcdefg";

desc.substring(2, 5) // "cde"
desc.substring(5, 2) // "cde"

str.substr(n, m) 은 n 부터 시작하고 m 개를 반환합니다.

let desc = "abcdefg";

desc.substr(2, 4) // "cdef"
desc.substr(-4, 2) // "de"

str.trim() 은 글자의 앞 뒤 공백을 제거합니다

let desc = " coding        "; 
desc.trim(); // "coding"

str.repeat(n) 은 문자열을 n 번 반복합니다.

let hello = "hello!";
hello.repeat(3); // "hello!hello!hello!"

문자열도 숫자로 치환되어 비교가 가능합니다.

1 < 3 // true
"a" < "c" // true

// 문자의 숫자 코드를 알아볼 수 있고,
"a".codePointAt(0); // 97

// 반대로 숫자 코드로 문자를 얻어올 수 있습니다.
String.fromCodePoint(97) // "a"

알바멧은 a 보다 z 가 크고, 대문자보다 소문자가 크다 정도를 알고 있으면 좋습니다.

아래 배열에서 문자열만 추출하고 싶다면,

let list = [
	"01. 들어가며",
	"02. JS의 역사",
	"03. 자료형",
	"04. 함수",
	"05. 배열",
]

let newList = []; // 빈배열 만들어주고
for(let i = 0; i < list.length; i++){ // 배열 순회하면서
	newList.push(list[i].slice(4)); // 4번째 부터 출력해서 배열에 넣어주기
}
console.log(newList);

콜라라는 금칙어가 있다면,

function hasCola(str){
	if(str.indexOf("콜라") > -1){ // 콜라가 있다면 순서를 뽑아내는
		console.log("금칙어가 있다");
	} else {
		console.log("통과");
	}
}

hasCola("와 사이다!"); // 통과
hasCola("덥다 콜라 내와!"); // 금칙어가 있다.

위 조건문은 includes 를 사용해도 됩니다.

function hasCola(str){
	if(str.includes("콜라")){
		console.log("금칙어가 있다");
	} else {
		console.log("통과");
	}
}