본문 바로가기

자바스크립트

JavaScript 표준 내장 객체 - String

String 데이터에 사용할 수 있는 표준 내장 객체중, 자주 쓰는 것들을 정리한 글입니다.

 

 

length

const msg1 = 'Hello World'
console.log(msg1.length) // 11

// 응용 예시
const msg2 = 'The quick brown fox jumps over the lazy dog'
const h1El = document.querySelector('h1')
h1El.textContent = msg2.length>20? `${msg.slice(0,20)}...`:msg2

   - 문자의 길이를 숫자로 반환합니다.

 

 

 

 

includes

const msg1 = 'Hello World!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.includes('!'))		// true
console.log(msg1.includes('dog'))	// false 
console.log(msg2.includes('dog'))	// true​

   - String 데이터 안에 특정 문자가 포함되는지를 확인하여 boolean으로 반환합니다.

 

 

 

 

replace

const msg1 = 'Hello world!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'


// 'Hello everyone!'
console.log(msg1.replace('world','everyone'))

// 'The quick brown fox jumps over the lazy cat.'
console.log(msg2.replace('dog','cat'))


console.log(msg1) // 'Hello world!'
console.log(msg2) // 'The quick brown fox jumps over the lazy dog.'

// 'Thequick brown fox jumps over the lazy cat.'
console.log(msg2.replace(' ',''))

// 'Thequickbrownfoxjumpsoverthelazycat.'
console.log(msg2.replaceAll(' ',''))​

   - String 데이터의 일부 부분을 지정한 값으로 교체한 문자데이터를 반환합니다.

   - String 데이터 원본을 바꾸는 것은 아니며, 바뀐 데이터를 반환하기만 합니다.

   - 모든 문자열을 교체하는것이 아닌, 가장 먼저 발견된 문자열만을 교체해주며,

      모든 문자열을 교체하고 싶다면 replaceAll() 메서드를 사용해야 합니다.

 

 

 

slice

const msg1 = 'Hello world!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.slice(0,5)) // 'Hello'
console.log(msg1.slice(6,-1)) // 'world'
console.log(msg1.slice(5)) // 'world'
console.log(msg2.slice(10,19)) //'brown fox'
console.log(msg2.slice(35,-1)) // 'lazy dog'​

   - 문자를 지정한 범위만큼 추출하여 반환합니다.

   - String 데이터 원본을 바꾸는 것은 아니며, 추출한 데이터를 반환하기만 합니다.

   - slice( a, b ) 라 지정을 한다면 a번째 글자부터 b-1번째 글짜까지 추출합니다.

   - 범위는 0부터 n-1 까지 설정됩니다. ( 0 : 맨 첫번째 , 1 : 두번째 .... )

   - 범위를 음수로 지정한다면 맨 뒤쪽을 기준으로 지정됩니다.

      ex) -1 : 뒤에서 첫번째 글자, -3 : 뒤에서 세번째 글자

 

 

 

 

split

const msg1 = 'Hello world!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.split(' ')) // ['Hello', 'world!']
console.log(msg2.split(' ')) //['The','quick','brown','fox','jumps','over','the','lazy','dog']

console.log(msg1.split('')) // ['H','e','l','l','o',' ','w','o','r','l','d','!']​

   - 특정 문자를 기준으로 문자열들을 나눈 배열데이터를 반환합니다.

   - 마찬가지로, 원본을 바꾸지는 않습니다.

 

 

 

 

toUpperCase & toLowerCase

const msg = 'Hello world!'

console.log(msg.toUpperCase()) // 'HELLO WORLD!'
console.log(msg.toLowerCase()) // 'hello world!'

console.log(msg) // 'Hello world!'​

   - 문자 데이터를 대문자 / 소문자 로 바꾼 문자열을 반환하는 메서드입니다.

   - 원본을 바꾸지는 않습니다.

 

 

 

 

trim

const msg = ' Hello world! '

console.log(msg.trim()) // 'Hello world!'
console.log(msg) // ' hello world! '​

   - 문자의 앞 뒤 공백을 제거하여 반환하는 메서드입니다.

   - 원본을 바꾸지는 않습니다.