본문 바로가기
Javascript

7. [JavaScript] 표준 내장 객체 - String

by 뽀롱트옌드 2023. 7. 27.

🏃🏻‍♀️ 표준 내장 객체

멤버 - 객체의 속성과 메소드를 통틀어 칭함

[ String, 문자 ]

MDN - string의 멤버

🏰 const welcome;

const welcome = 'Welcome to the world of Poppy!';
// length        123456789012345678901234567890
// index         012345678901234567890123456789
// backCounting -098765432109876543210987654321 (음수, 모든 숫자 앞에 -)

- .length

특수문자, 띄어쓰기를 포함한 문자열의 갯수(길이)를 숫자 데이터로 반환
console.log(welcome.length); // 30

- .includes('문자데이터', index);

  • 대상의 문자열에 첫번째인수 데이터가 포함(대소문자 구별)되는지 검사후 불린데이터로 반환
  • 두번째인수의 기본값은 0이며 인수의 index부터 대상의 마지막index까지 첫번째 인수데이터가 포함되는지 검사후 불린데이터로 반환
console.log(welcome.includes('Poppy')); // true
console.log(welcome.includes('Poppy', 25)); // flase

if(!welcome.includes('thankYou')) {
  console.log('감사인사는 없숨미다'); // 감사인사는 없숨미다 
}

- .indexof();

  • 대상에 인수와 일치하는 문자데이터가있으면 시작하는 index(숫자데이터)를 반환
  • 대상에 인수와 일치하는 문자데이터가 없으면 -1반환
console.log(welcome.indexOf('to')); // 8
console.log(welcome.indexOf('thankYou')); // -1 

if(welcome.indexOf('thankYou')  === -1 ) {
  console.log('감사인사는 없숨미다'); // 감사인사는 없숨미다
}

★ 아래의 string 표준내장객체는 사용시에만 적용, 대상의 원본데이터 자체가 변경되는 것은 아님

- .padEnd(length, 데이터);

  • 대상의 길이가 첫번째인수보다 작으면 원본데이터를 유지하면서 두번째인수의 데이터를 첫번째인수의 길이만큼 대상의 뒤에 추가해서 반환
  • 대상의 길이가 첫번째인수보다 작을때만 실행되며 크면 원본데이터 전부를 반환

console.log(welcome.padEnd(33, '*')); // Welcome to the world of Poppy!***

- .padStart(length, 데이터);

  • 대상의 길이가 첫번째인수보다 작으면 원본데이터를 유지하면서 두번째인수의 데이터를 첫번째인수의 길이만큼 대상의 앞에 추가해서 반환
  • 대상의 길이가 첫번째인수보다 작을때만 실행되며 크면 원본데이터 전부를 반환

console.log(welcome.padStart(33, '*****')); // ***Welcome to the world of Poppy!

- .replace(데이터, 데이터);

  • 대상에서 첫번째 인수와 일치하는 부분을 두번째 인수로 교체해 반환

console.log(welcome.replace('the world of Poppy', 'My world')); // Welcome to My world!

- .slice(index, index);

  • 첫번째인수의 인덱스번호부터 두번째인수의 인덱스번호 직전까지의 문자데이터를 반환
  • 두번째인수가 없으면 끝까지 반환
console.log(welcome.slice(15, 30)); // world of Poppy!
console.log(welcome,slice(0, -23)); // Welcome
console.log(welcome,slice(24)); // Poppy!

- .toLowerCase();

  • 대상이 영어일때 전부 소문자로 변환해 반환

console.log(welcome.toLowerCase()); // welcome to the world of poppy!

- .toUpperCase();

  • 대상이 영어일때 전부 대문자로 변환해 반환

console.log(welcome.toUpperCase()); // WELCOME TO THE WORLD OF POPPY!

- .trim();

  • 대상의 앞과 뒤의 공백 문자(탭, 스페이스, 줄바꿈등)을 제거한뒤 반환
  • 앞뒤가 아닌 중간이나 사이에 있는 공백문자는 해당 안됨
const tapAndSpace = `   
   Tap and Space   `;
console.log(tapAndSpace); //    
                          //   Tap and Space   
console.log(tapAndSpace.trim()); // Tap and Space

- .split(데이터);

  • 인수가 구분자가되어 인수를 기준으로 대상을 구분해 배열로 반환
const colors = 'Pink * Black * White';

console.log(colors.split(' * ')); // (3)[Pink, Black, White]
console.log(colors.split('')); // (20) ['P', 'i', 'n', 'k', ' ', '*', ' ', 'B', 'l', 'a', 'c', 'k', ' ', '*', ' ', 'W', 'h', 'i', 't', 'e']
console.log(colors.split(' * ').reverse()); // (3) ['White', 'Black', 'Pink'] 
console.log(colors.split('').reverse().join()); // e,t,i,h,W, ,*, ,k,c,a,l,B, ,*, ,k,n,i,P

'Javascript' 카테고리의 다른 글

9. [JavaScript] 표준 내장 객체 - Math  (0) 2023.08.01
8. [JavaScript] 표준 내장 객체 - Number  (0) 2023.07.31
6. [JavaScript] 클래스  (0) 2023.07.27
5. [JavaScript] 함수  (0) 2023.07.25
4. [JavaScript] 연산자와 구문  (0) 2023.07.22