자바스크립트 내장객체 - String

20355 단어 JavaScriptJavaScript

문자열

1. 공백 없애기(trim)

const myArr = ['          ABC', 'ABC abc       ',`first
second third
        forth
sentence`];

const filtered = [];
myArr.forEach(string=>{
    filtered.push(string.trim());
});

console.log(filtered);
  • 문자열의 양끝 공백, 줄바꿈, 탭 제거
  • 문자열 원본 값에는 영향을 주지 않음

2. 문자열 자르기

1) slice

const myString = 'I want to learn JavaScript';
console.log(myString.slice(10)); // learn JavaScript
console.log(myString.slice(0,6)); // I want
  • 첫번째 인자로 시작 지점의 인덱스, 두번째 인자로 종료 지점의 인덱스를 받음
  • 두번째 인자는 필수값이 아님
  • 기존 문자열에는 영향을 미치지 않음
  • 인자가 음수일 경우 뒤에서부터 위치를 의미
  • 참고사항
    👉 인자의 값이 문자열의 길이보다 클 경우 = 빈값 반환
    👉 첫번째 인자가 두번째 인자보다 클 경우 = 수행하지 않음

2) substring

const myString = 'I want to learn JavaScript';
console.log(myString.substring(0)); // I want to learn JavaScript
console.log(myString.substring(0,6)); // I want
  • 기본적인 특징은 slice 메소드와 동일
  • slice 메소드와 다른점
    👉 인자가 음수일 경우 수행하지 않음
    👉 첫번째 인자가 두번째 인자보다 클 경우 두 개의 인수를 교환하여 수행

3) substr

const myString = 'I want to learn JavaScript';
console.log(myString.substr(0)); // I want to learn JavaScript
console.log(myString.substr(0,6)); // I want
console.log(myString.substr(-10)); // JavaScript
  • 첫번째 인자로 시작 지점의 인덱스, 두번째 인자로 문자열 길이를 받음
  • 추출할 문자열의 길이를 정확히 알고 있을 경우 활용
  • 참고사항
    👉 두번째 인자에 음수를 넣었을 경우 = 수행하지 않음
    👉 첫번째 인자가 문자열의 길이보다 클 경우 = 빈값 반환

3. 문자열 길이 구하기(length)

const myString = 'JavaScript';
console.log(myString.length); // 10

4. 문자열로 변환하기(toString)

const num = 5;
const bool = true;
const arr = [1,2,3];
const obj = {a: 1};

console.log(num.toString()); // 5
console.log(bool.toString()); // true
console.log(arr.toString()); // 1,2,3
console.log(obj.toString()); // [object Object] 

num.__proto__.toString = () => {
    return 'toString 덮어쓰기';
}
console.log(num.toString()); // toString 덮어쓰기
  • toString 메소드는 Object의 내장 메소드 📌
  • 모든 객체는 Object를 상속받기 때문에 prototype을 통해 메소드에 접근하고 재정의(Override)
  • 접근하여 오버라이드하는 것은 상속과 다름
  • __proto__속성을 통해 메소드에 접근하고 재정의

5. 문자열 하나로 합치기(concat)

const str1 = 'I';
const str2 = ' learn';
const str3 = ' JavaScript';

console.log(str1.concat(str2, str3)); // I learn JavaScript
  • concat 메소드는 두개 이상의 문자열을 하나로 합침

6. 특정 위치의 문자 반환하기(charAt)

const myString = 'JavaScript';
console.log(myString.charAt(0));
  • 숫자형 인자를 받고 이 값은 문자열에서 인덱스를 가르킴
  • 해당 인덱스 위치의 문자를 반환

7. 특정 문자열 위치 확인하기

1) indexOf

const myString = 'I want to learn JavaScript, but it is too hard';
console.log(myString.indexOf('t')); // 5
console.log(myString.indexOf(', but')); // 26
console.log(myString.indexOf('*')); // -1
  • indexOf 메소드는 단일 문자 또는 문자열 단위로 일치를 확인
  • 특정 문자와 일치하는 첫번째 인덱스를 반환
  • 일치하는 문자가 없으면 -1을 반환

2) lastIndexOf

const myString = 'I want to learn JavaScript, but it is too hard';
console.log(myString.lastIndexOf('t')); // 38
console.log(myString.lastIndexOf(', but')); // 26
console.log(myString.lastIndexOf('*'));
  • lastIndexOf 메소드는 문자열의 뒤에서부터 일치를 확인
  • 나머지 특징은 indexOf 메소드와 동일

8. 특정 문자열 포함 여부 확인(includes)

const myString = 'I want to learn JavaScript';
console.log(myString.includes('JavaScript')); // true
console.log(myString.includes('JavaScript',16)); // true
console.log(myString.includes('JavaScript',17)); // false
  • includes 메소드는 일치하는 문자열이 있는지 확인
  • true 또는 false로 값을 반환
  • 첫번째 인자로 문자열을 받고 두번째 인자로 인덱스를 받음
  • 두번째 인자에 인덱스를 지정하면 해당 인덱스 위치부터 확인
  • 두번째 인자는 필수값이 아님

9. 문자열 대소문자 변환하기

const myString = 'I want to learn JavaScript';
console.log(myString.toLowerCase()); // i want to learn javascript
console.log(myString.toUpperCase()); // I WANT TO LEARN JAVASCRIPT
  • toLowerCase, toUpperCase 메소드로 문자열의 대소문자를 일괄 변환

좋은 웹페이지 즐겨찾기