[자바스크립트 중급] String 문자 함수

1. 문자열 팁

• html 문자열은 ''로 감싸는게 편하다.  
  •  '<div class="box_title">제목</div>' 처럼 내부에 ""를 쓸 일이 있어서 
• 영문 문자열은 ""로 감싸는게 편하다.
  • "it's 3 o'clcok" 처럼 내부에 ' 쓸 일이 있어서

 

2. 벡틱 `` 의 유용한 점

• 백틱은 여러 줄을 표현할 수 있다.
• 따옴표는 줄바꾸려면 역슬래시n (\n)을 써야하고 꼭 한줄로 작성해야한다. 엔터쳐서 줄바꾸면 에러

// 백틱 줄바꿈

let word = `동해물과

백두산이

마르고

닳도록`;

// 따옴표 줄바꿈

let word2 = '동해물과\n백두산이\n마르고\n닳도록'

 

3. length 문자열 길이 확인하는 방법

• string.length 하면 몇 글자인지 반환
• 가입할때 아이디, 비밀번호 몇 자 이상 이하 제한할때 사용

 

4. 문자열 index 어떤 글자있는지 확인하는 방법

• string[숫자] 하면 변수에 있는 문자열에서 해당 숫자번째에 있는 값 반환
• 배열과 동일하게 0부터 시작
• 배열과 다르게 한글자만 바꾸는건 허용되지 않음 (word2[0] = '금' 이렇게 한글자 변경해도 안먹힘)

// 문자열에서 해당 INDEX에 있는 글자 반환

let word2 = '동해물과\n백두산이\n마르고\n닳도록'

console.log(word2[0]); // 동

 

5. 영어 문자 대소문자 바꾸기

1) toUpperCase() : 모든 영문 대문자로 변경

2) toLowerCase() : 모든 영문 소문자로 변경 

 

 

6. indexOf('text') : 특정 문자 위치 찾기

• string.indexOf(찾을 문자, position)
• 특정 문자가 있는 index 상 첫번째 위치를 찾아줌. (position 넣으면 그 순서부터 찾음)

// indexOf() 단어 위치 찾기

let word1 = "Hey it's you";

console.log(word1.indexOf("it's")); // 4

• if문의 조건으로 넣을 경우, 첫번째 단어는 index 상 0 이다 if문에서 0은 false를 뜻함 그래서 아무것도 반환하지 않음 그래서 조건에 > -1 를 넣어줌

// 응용

if(word1.indexOf('Hey') > -1){

    console.log("Hey을 포함한 문자입니다")

}

 

 

7. slice(n, m) : n 부터 m 까지 문자열을 반환함 (index 순서 넣어줌)

• str.slice(n, m) 
• 인덱스는 항상 0 부터 시작인걸 기억하자.
• m 인수를 넣지 않으면 시작점에서 문자열 끝까지 반환
• m이 양수면 그 순서까지 전까지 반환 (해당 순서는 포함하지 않음)
• m이 음수면 마지막부터 index 셈 (마지막부터 센 값이 마지막)

// slice(n,m)

let word1 = "abcdefg";

console.log(word1.slice(2,5)); // cde

console.log(word1.slice(3)); // defg

console.log(word1.slice(2,-2)); // cde

 

8. substring(n, m) : n부터 m 까지 문자열 반환

• str.substring(n, m)
• slice(n, m)와 비슷하지만 n과 m 을 바꿔도 동작함. == 그냥 n번째와 m 번째 사이 문자열 반환
• m 값 즉 마지막 값은 포함 안함. (슬라이스와 동일)
• 음수는 0으로 인식

 

9. substr(n, m) : n부터 m '개' 문자열 반환 (갯수만큼 문자 가져옴)

• str.substr(n, m)
• 음수 안됨

// slice, substring, substr

let word1 = "abcdefg";

console.log(word1.slice(2,5)); // cde

console.log(word1.substring(5,2)); // cde

console.log(word1.substr(2, 3)); // cde

 

10. trim() : 앞 뒤 공백 제거

• str.trim()
• 사용자로부터 입력받을 때 사용 e.g) "   닉네임     " 이런 식으로 입력받았을 때 사용

 

11. repeat(n) : 문자열을 n 번 반복

• str.repeat(n)

 

12. 문자열 비교

• 소문자가 대문자보다 크다~ 정도만 알고 있으면 됨
• 아스키 코드에 따름
• "a" < "c" 알파벳 순서대로 크며
• "A" < "a" 대문자보다 소문자가 더 크다.
• 아스키코드 얻으려면
  • "얻고싶은 알파벳".codePointAt(0); 하면 번호 줌.

 

13. includes() : 특정문자를 포함하는지 확인 (true/false를 반환) ★

• str.includes("찾고싶은문자", 시작점)
• 시작점은 안넣으면 전체를 조회

 

📌 예제1 : for 문이용하여 책의 목차에서 제목만 가져오기

// for 문 이용하여 책의 목차 제목만 가져오기

let list = [

    "01. 1장",

    "02. 2장",

    "03. 3장",

    "04. 4장",

    "05. 5장",

];

let newList = []; // 빈 배열 하나 만들어줌 (여기다 가져올거임)

for(let i = 0; i<list.length; i++){

    newList.push( //배열의 가장 끝에 추가 1장 추가하고 끝에 2장 추가하고 ... 거꾸로면 unshift

        list[i].slice(4) // 인덱스상 4번째부터 제목임 (띄어쓰기도 포함됨)

    )

}

console.log(newList); // [ '1장', '2장', '3장', '4장', '5장' ]

 

------------------------------------------------------

 

// 또는 그냥 콘솔로그로 찍어낼수도

for(let i = 0; i<list.length; i++){

    console.log(list[i].slice(4))

}

1장

2장

3장

4장

5장

 

📌 예제2 : 금지어 지정하기

// 금지어 지정하기 *금기어: 콜라

// indexOf() 활용

function searchCola(str){

    if(str.indexOf('콜라') > -1){

        console.log("금지어 '콜라'가 있습니다.")

    }else{

        console.log("금지어가 없습니다.")

    }

}

searchCola("와 사이다가 너무 시원하다"); // 금지어가 없습니다.

searchCola("와 콜라가 너무 시원하다"); // 금지어 '콜라'가 있습니다.

// includes() 활용

function searchSoda(str){

    if(str.includes("사이다")){

        console.log("금지어 '사이다'가 있습니다")

    } else {

        console.log("금지어가 없습니다")

    }

}

searchSoda("와 사이다가 너무 시원하다"); // 금지어 '사이다'가 있습니다

searchSoda("와 콜라가 너무 시원하다"); // 금지어가 없습니다