📌 '(작은 따옴표), "(큰 따옴표), `(백틱)

• '(작은 따옴표), "(큰 따옴표) 와의 차이

  별로 없음 → 상황에 맞게 쓰면 됨

◾ 상황별 사용 추천

• '(작은 따옴표)
  

    // html 사용 시 ("(큰 따옴표)로 된 내용들 有)
    let html  = '<div class="box_title">제목<div>';

• "(큰 따옴표)
  

    // 영어로 된 문장
    let desc = "It's 3 o'clock."

• ` (백틱)
  

    // 변수 표현 (${} 활용)
    let name = 'Mike';
    let result = `My name is ${name}.` // 'My name is Mike.'
    
    // 표현식
    let add = `2 더하기 3은 ${2+3}입니다.` // '2 더하기 3은 5입니다.'
    
    // 여러 줄
    // 따옴표 활용 시 -> \n 활용(줄바꿈) & 한 줄로만 가능
    let weather = `오늘은 맑고 화창한
    날씨가 계속 되겠습니다.
    내일은 비소식이 있겠습니다.`

📌 length

문자열 길이

• 사용하는 경우

  글자 제한 (가입 시, id나 비밀번호)
  

• 예시 코드

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

📌 특정 위치 접근

[](대괄호) 활용

• 한 글자만 교체 x

• 예시 코드
  

    let desc = '안녕하세요.';
    
    // 위치 접근
    desc[2] // '하'
    
    // 한 글자만 교체 x
    desc[5]='용';
    console.log(desc) // '안녕하세요.'

📌 toUpperCase() / toLowerCase()

모든 영문을 대/소문자로 바꿈

• 예시 코드
  

    let desc = 'Hi guys.';
    
    desc.toUpperCase(); // 'HI GUYS.'
    desc.toLowerCase(); // 'hi guys.'

📌 str.indexOf(text)

문자를 인수로 받아 위치 나타냄

• 찾는 문자 없으면

  -1 반환 ( → if 문 작성 시, 주의_ 0번째 인덱스는 false 반환)
  

• 포함된 문자가 여러 개 일 경우

  → 첫 번째 위치만 반환
  

• 예시 코드 (기본)
  

    let desc = 'Hi guys. Nice to meet you';
    
    desc.indexOf('to'); // 14
    desc.indexOf('man') // -1
    
    // if 문 작성 시, 주의
    // [안 좋은 예] 0번째 인덱스는 false 반환
    if (desc.indexOf('Hi')){
      console.log('Hi가 포함된 문장입니다.') // 안나옴
    }
    
    // [올바른 예]
    if (desc.indexOf('Hi') > -1){
      console.log('Hi가 포함된 문장입니다.') // 나옴
    }

• 예시 코드 (심화)
  

    // 금칙어: 콜라
     
    function hasCola(str){
      if (str.indexOf('콜라')){ 
      // if (str.indexOf('콜라')> -1){ 로 변경 필요
        console.log('금칙어가 있습니다.');
      } else {
        console.log('통과')
      }
    }
    
    hasCola('와 사이다가 짱이야!'); // -1 => true가 되어 금칙어가 있다고 나옴
    hasCola('무슨 소리, 콜라가 최고지');
    hasCola('콜라'); // 0 => 0이 나와 통과가 됨

📌 String.includes(text)

하나의 문자열이 다른 문자열에 포함되어 있는지를 판별 → true, false 반환

• 예시 코드
  

    // 금칙어: 콜라
     
    function hasCola(str){
      if (str.includes('콜라')){ 
        console.log('금칙어가 있습니다.');
      } else {
        console.log('통과')
      }
    }
    
    hasCola('와 사이다가 짱이야!'); // '금칙어가 있습니다.'
    hasCola('무슨 소리, 콜라가 최고지'); // '금칙어가 있습니다.'
    hasCola('콜라'); // '통과'

📌 str.slice(n, m)

n ~ (m-1) 까지 문자열 반환

• n

  시작점
  

• m

  • 없으면 → 문자열 끝까지
  • 양수면 → (m-1)까지
  • 음수면 → 끝에서 부터 셈

• 예시 코드 (기본)
  

    let desc = 'abcdefg';
    
    desc.slice(2); // 'cdefg'
    desc.slice(0,5) // 'abcde'
    desc.slice(2,-2) // 'cde'

• 예시 코드 (실용)
  

    // list의 글자만 만들기
    
    let list = [
      "01. 들어가며",
      "02. JS의 역사",
      "03. 자료형",
      "04. 함수",
      "05. 배열",
    ]
    
    let newList = [];
    
    for (let i = 0; i < list.length; i++){
      newList.push(list[i].slice(4))
    }
    
    console.log(newList) // [ '들어가며', 'JS의 역사', '자료형', '함수', '배열' ]

📌 str.substring(n, m)

n과 m 사이 값 반환

• 음수 → 0으로 인식

• 예시 코드
  

    let desc = 'abcdefg';
    
    // n과 m 이 바뀌어도 같은 값 반환
    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!'

📌 문자열 비교

• 아스키 코드 표

  
  

• 번호 얻는 법

  .codePointAt(0);
  

• 문자 얻는 법

  String.fromCodePoint(숫자)
  

• 예시 코드
  

    "a".codePointAt(0); // 97
    String.fromCodePoint(97) // 'a'

• 정리

  알파벳: A > Z, 대문자 > 소문자 정도만 알아두면 됨

---

출처

• 코딩앙마_자바스크립트 중급