[JS] String 문자열 메소드 indexof(), slice(), substring() 등

 

 

' 작은 따옴표

" 큰 따옴표

` 벡틱

 

html 코드 같은 경우 작은 따옴표로 묶는게 편하다.

let html = '<div class ="box_title">TITLE</div>'; // 중간에 큰따옴표가 있으므로

 

영어로 된 문장은 큰 따옴표를 쓰는게 편하다.

let desc = "It's 3 o'clock.";

 

벡틱은 달러와 중괄호를 이용해 변수를 표현하거나 표현식을 쓸 수 있다.

let name = "aoto";
let result = `my name is ${name}.`; // my name is aoto.
let add = `2 더하기 3은 ${2 + 3}입니다.`; // 2 더하기 3은 5입니다.

 

벡틱은 쉽게 여러 줄을 표현할 수 있다!

let desc = `오늘은 맑고 화창한
날씨가 계속 되겠습니다.`;

let desc2 = "오늘은 맑고 화창한\n날씨가 계속 되겠습니다.";
// 따옴표는 \n을 추가해야 하고 줄바꿈 하면 안된다.

 

배열과 같이 특정 위치에 접근할 수 있다.

하지만 특정 값만 바꾸는 것은 불가하다.

let desc = "안녕하세요.";

desc[2]; // "하"
desc[4] = "용";
console.log(desc); // "안녕하세요."

 

str.indexOf(text) : 문자열의 인덱스 값을 반환. 같은 값이 여러개면 처음 값만 반환. 찾는 값이 없으면 -1 반환

let desc = "hi guys. nice to meet you.";
desc.indexOf("to"); // 14
desc.indexOf("hello"); // -1

// if문을 쓸 때 주의 필요
if (desc.indexOf("hi")) {
  // hi의 인덱스는 0. if문에서 0은 false 이다.
  console.log("hi가 포함된 문장입니다.");
}

// 그러므로 조건을 이런 식으로 써야 한다.
if (desc.indexOf("hi") > -1) {
}

 

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

m이 없다면 문자열 끝까지 반환.

양수면 그 숫자까지(포함하지 않음. 5를 적으면 4까지 반환)

음수면 끝에서부터 센다.

let desc = "abcdefg";
desc.slice(2); // cdefg 2부터 끝까지
desc.slice(0, 5); // abcde 0부터 4까지
desc.slice(2, -2); // cde 2부터 뒤에서 2까지

 

str.substring(n, m) : 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

 

❗️ 문자열도 비교가 가능하다 ! "a" < "c" // true

아스키 코드를 비교하기 때문. 코드를 구하려면?

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

 

활용!!

// 배열에서 글만 가져오고 싶다면!
let list = ["01. 들어가며", "02. JS의 역사", "03. 문자열"];

let newList = [];

for (i = 0; i < list.length; i++) {
  newList.push(list[i].slice(4)); // 4부터 끝까지 반환
}

console.log(newList); // ['들어가며', 'JS의 역사', '문자열']

// 금칙어 : 콜라

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

hasCola("사이다가 짱이야"); // 금칙어가 있습니다. -1은 true
hasCola("아니, 콜라가 최고야"); // 금칙어가 있습니다.
hasCola("콜라"); // 통과 => 0은 if에서 false이기 때문에 else로 넘어간다.

// 잘 동작하게 하려면 if(str.indexOf("콜라") > -1)
hasCola("사이다가 짱이야"); // 통과
hasCola("아니, 콜라가 최고야"); // 금칙어가 있습니다.
hasCola("콜라"); // 금칙어가 있습니다.

// 아니면 간단히 includes를 활용해도 된다.

 

 

 

🔗 https://youtu.be/G360D6lqrfo?si=g5AFD79pO5MLJyJ3