문자 표현 방식 (', ", `)
- ' 와 "는 차이가 크게 없다.
-- ' '으로 감싼 문장 안에서는 ""를 사용
- " "으로 감싼 문장 안에서는 ''를 사용
- ` `으로 감싼 문장 안에서는 ${}을 사용하여 변수를 사용하거나 표현식을 쓸 수 있음
- ` `은 여러줄을 포함할 수 있음. (', "에서 줄바꿈은 \n을 이용)
// `` 안에서 ${} 사용
let name = '성원';
let result = `My name is is ${name}.`;
let add = `2 더하기 3은 ${2+3}입니다.`;
console.log(result);
console.log(add);
// `` 안에서 여러줄 표현
let desc = `이렇게 하면
여러줄을
표현할 수 있
습니다.
`
console.log(desc);- 참고 : ` `에 줄바꿈을 포함하여 str(변수)에 저장한 후, 스크립트에서 .html(str) 으로 출력해도 줄바꿈이 표시가 되지 않는 경우가 있음.
이 경우, white-space 라는 css속성을 변경해서 해결함. ` `에 <br/>태그를 추가하면 줄바꿈이 되는지 아닌지 여부 테스트 필요.length : 문자열 길이
- length를 이용하여 문자열의 길이를 구할 수 있음
let desc = '안녕하세요오!'
console.log(desc.length); // 7문자열 특정 위치 접근
- 배열과 같이 []를 이용하여 문자열의 특정 위치에 접근할 수 있음
- index 0부터 시작
- 배열과 차이 : 문자열의 한 글자만 바꾸는 것은 허용되지 않음
let desc = '안녕하세요오!'
console.log(desc[2]); // 하toUpperCase() / toLowerCase()
- 모든 영문을 대문자 / 소문자로 바꿔줌;
- 영어인 경우 사용 가능
- 영어와 다른 언어가 섞여있는 경우 영어만 영향 받음
- 기존 문자열이 변경되는 것은 아님!
let desc = 'Hello, World!';
let desc2 = 'Hello, 안녕??';
console.log(desc.toUpperCase()); // "HELLO, WORLD!"
console.log(desc.toLowerCase()); // "hello, world!"
console.log(desc); // "Hello, World!"
console.log(desc2.toUpperCase()); // "HELLO, 안녕??"
console.log(desc2.toLowerCase()); // "hello, 안녕??"str.indexOf(text)
- 문자(text)를 인수로 받아 몇번째 위치하는지 알려줌
- 인수로 받은 문자가 문자열에 없을 경우 -1반환
- 인수가 여러 개 포함되어 있을 시, 가장 첫 번째 나오는 문자 인덱스만 반환
- 인덱스는 0 부터 시작하기 때문에 if문을 쓸 때 주의해야함!!
- if문을 사용할 경우,
desc.indexOf('') > -1로 비교해야함
let desc = 'Hello, World!';
console.log(desc.indexOf('llo')); // 2
console.log(desc.indexOf('z')); // -1
console.log(desc.indexOf('o')); // 4
if (desc.indexOf('Hello')) {
console.log('안녕하세요!');
} else {
console.log('없어요오');
}
// 없어요오
// 다음과 같은 문장 작성 시, Hello의 index는 0이기 때문에 if문이 false가 됨.
if (desc.indexOf('Hello') > -1) {
console.log('안녕하세요!');
} else {
console.log('없어요오');
}
// 안녕하세요!str.slice(n, m)
- 특정 범위의 문자열만 추출 (n부터 m까지의 문자열 반환)
- m이 없으면 문자열 끝까지 반환함
- m이 양수면 해당 idx까지지만 m은 포함하지 않음
- m이 음수면 끝부터 셈 (-m 인덱스 포함)
let desc = 'abcdefg';
console.log(desc.slice(2));
// idx2부터 끝까지
// cdefg
console.log(desc.slice(0, 3));
// idx 0부터 3까지(4번째 글자 포함x)
// abc
console.log(desc.slice(2, -2));
// 끝에서부터 idx 2부터 2개 (x)
// idx2부터 끝에서부터 idx2(e)까지
// cde
console.log(desc.slice(-2, -1));
// 시작점이 종료지점보다 앞에 있으면 가능
// "f"
console.log(desc.slice(1, -1));
// idx 1부터 끝에서부터idx 1까지
// bcdefstr.substring(n, m)
- n과 m사이의 문자열 반환
- n과 m을 바꿔도 동작 (n부터 m까지 X / n과 m 사이 O)
- 음수는 0으로 인식
let desc = 'abcdefg';
console.log(desc.substring(1, 2)); // b
console.log(desc.substring(1, 1)); // ""
console.log(desc.substring(0, 3)); // abc
console.log(desc.substring(3, 0)); // abcstr.substr(n, m)
- n부터 시작 ~ m개를 가져옴
let desc = 'abcdefg';
console.log(desc.substr(1, 2)); // bc
console.log(desc.substr(-1, 2)); // g
console.log(desc.substr(-2, 2)); // fg
console.log(desc.substr(6, 2)); // gstr.trim() : 앞 뒤 공백 제거
- 사용자로부터 문자열을 입력받을 때 주로 사용
str.repeat(n) : 문자열 n번 반복
let good = '조뮁최고!!';
console.log(good.repeat(3));
// "조뮁최고!!조뮁최고!!조뮁최고!!"문자열 비교
'a' < 'c' // true(아스키코드 기준으로 비교)- a < ... < z
- 소문자 > 대문자
- 문자 -> 문자 번호 : 'a'.codePointAt(0); // 97
- 문자 번호 -> 문자 : String.fromCodePoint(num); // 'a'
예제
- 목차에서 숫자 제외하고 문자만 가지고오기
let list = [
'01. 들어가며',
'02. js의 역사',
'03. 자료형',
'04. 함수',
'05. 배열',
];
let newList = [];
for (let i=0; i<list.length; i++){
newList.push(list[i].slice(4));
// idx4부터 끝까지
}
console.log(newList);
// ["들어가며","js의 역사","자료형","함수","배열"]- 금지어 포함여부 판단 (.indexOf(str))
function hasCola(str){
if(str.indexOf('콜라') > -1){
console.log('콜라 포함');
} else {
console.log('통과');
}
}
hasCola("콜라 주세요"); // "콜라 포함" (0)
hasCola("사이다 말고 콜라 주세요"); // "콜라 포함" (7)
hasCola("사이다가 짱이야"); // "통과" (-1)- 금지어 포함여부 판단 (.includes())
function hasCola(str){
if(str.includes('콜라')){
console.log('콜라 포함');
} else {
console.log('통과');
}
}
hasCola("콜라 주세요"); // "콜라 포함"
hasCola("사이다 말고 콜라 주세요"); // "콜라 포함"
hasCola("사이다가 짱이야"); // "통과"