반응형
1. indexOf( ) - 찾고자하는 문자열의 위치 반환
2. slice( ) - 문자열에서 특정 부분 찾아서 새로운 문자열로 반환
3. substr( ) - 문자열에서 특정 부분 잘라냄
4. replace( ) - 문자열에서 특정 문자값 바꿔치기
1. 문자열.indexOf() - 찾고자하는 문자열의 위치 반환
const txt = "Hello World";
console.log(txt.indexOf("apple")); // -1
apple이란 단어를 찾기했을 때, 값이 없으면 -1을 반환한다.
만약 글자가 있다면 그 글자의 위치를 찾아서 숫자로 반환.
indexOf는 단어가 있는지 없는지 확인할 때 사용을 많이 한다고한다.
2. 문자열.slice() - 문자열에서 특정 부분 찾아서 새로운 문자열로 반환
const txt = "Hello World";
const txt1 = txt.slice(0, 5); // 0번째에서부터 5번째까지 txt 자른후, 새로운 문자열로 반환
console.log(txt1); // Hello
3. 문자열.substr() - 문자열에서 특정 부분 잘라냄
const txt = "Hello World";
const txt1 = txt.substr(6,3); //6번째 글 부터 그 후 3번째까지 잘라내기
console.log(txt1) // Wor
.substr()은 만약 글자 수가 50개 넘어가는 긴 문장이 있다면, 40개 이후로 '...'로 처리하는 기능으로도 사용많이한다.
아래에 말 줄임표 기능 스크립트를 짜보자.
const origin = "나비야 나비야 이리나라 오너라 호랑나비 흰나비 춤을 추며 오너라"
let result = '';
if(origin.length > 16){
resualt = origin.substr(0,16)+"...";
}else{
result = origin;
}
console.log(result); // 나비야 나비야 이리나라 오너라...
// 삼항연산자 함축형으로 표현
(origin.length > 16) ? resualt = origin.substr(0,16)+"..." : result = origin;
4. 문자열.replace() - 문자열에서 특정 문자값 바꿔치기
const intro = "우리 Abc회사는 높은 품질의 제품을 만들고
Abc회사 브랜드 가치를 높이기위해 노력하고있습니다. 샬라샬라~ "
const newIntro = intro.replace("Abc", "Cde");
console.log(newIntro)
// "우리 Abc회사는 높은 품질의 제품을 만들고 Abc회사 브랜드 가치를 높이기위해 노력하고있습니다."
.replace()의 단점은 처음 글자만 변경된다. 전부 한번에 바꾸기위해서는 정규표현식을 써야한다.
const newIntro = introduce.replace(/Abc/g, "Cde");
// 'g'는 글로벌(전체)이라는 의미
const newIntro = introduce.replace(/AAA/ig, "Cde");
// 대수문자 구분없이 바꾸고싶을때는 'i'를 추가
5. 문자열.split() - 문자열을 배열로 반환
const colors = "red green blue";
const arr = colors.split(",");
console.log(arr); // red, green, blue -> ',' 기준으로 배열로 변환
반응형
'프론트엔드 > Javascript' 카테고리의 다른 글
자바스크립트 < 비구조화 할당 (구조분해 할당)에 대해 알아보기> (0) | 2022.01.22 |
---|---|
자바스크립트 parseInt() / parseFloat() - 해당값을 정수/실수로 반환 - JS (0) | 2022.01.21 |
배열전용 내장함수 반복문 forEach() / map() 자바스크립트 JS 공부 (0) | 2022.01.18 |
자바스크립트 for / for of / for in 반복문 사용법 - JS (0) | 2022.01.18 |
자바스크립트 대입연산자 ( = , += ) 사용법 (0) | 2022.01.18 |