자바스크립트 - 객체로서의 문자열

돌고돌아아아·2021년 7월 7일
0

꼬 자바스크립트

목록 보기
5/8

length 속성 - 문자열의 길이 찾기

let browserType = 'mozilla';
browswrType.length; // 7 반환

[순서] - 특정 문자열 문자 검색

browserType[0]; // m 반환
대괄호 안에 가지고 오려는 문자의 순서를 넣음
browserType[browserType.length-1]; // 마지막 a 반환
길이는 7이지만 카운트가 0에서 시작하기 때문에
문자의 마지막 위치는 6이다. 
length-1을 사용하면 마지막 문자를 갖고 올 수 있다.

문자열 내부의 특정 문자열 찾아 추출하기

indexOf('문자열')

browserType.indexOf('zilla');	// 위치 2에서 시작하므로 2를 반환
browserType.indexOf('vanilla'); // vaniila 발견되지 않았으므로 -1을 반환
이를 사용하여 특정 단어를 포암하지 않는 문자열의 모든 인스턴스를 찾을 수 있다
if(browserType.indexOf('mozilla') === -1) {
  // do stuff with the string if the 'mozilla'
  // substring is NOT contained within it
}
if(browserType.indexOf('mozilla') !== -1) {
  // do stuff with the string if the 'mozilla'
  // substring IS contained within it
}

slice(숫자 위치부터, (숫자 위치 전까지))

browserType.slice(0,3); // 0에서 3의 위치 전까지 즉 "moz"반환
browserType.slice(2); // 2의 위치 부터 끝까지 반환하여 "zilla" 반환

케이스(대소문자) 변환

toLowerCase() - 문자열의 모든 문자를 소문자로 변환

toUpperCase() - 문자열의 모든 문자를 대문자로 변환

let radData = 'My NaMe Is MuD';
radData.toLowerCase(); "my name is mud"
radData.toUpperCase(); "MY NAME IS MUD"
변수 뒤에 메소드를 붙여 변환 시킴

replace()메서드 - 문자열의 일부 업데이트

문자열 내의 한 부분을 다른 바꿈
두 개의 매개변수로 문자열을 대체한다
browserType.replace('moz','van'); // moz를 van로 대체하여 "vanilla"반환
browserType = "mozilla" // 변수에 담지 않았기 때문에 변수의 값은 변하지 않는다.
*** 중요한 것은 replace를 사용하였다고 하여 변수의 값이 변하지 않는다.
    replace를 하여 변한 값을 담으려면 변수에 담아 작성해야한다.
    >> browserType = browserType.replace('moz','van');
    

예제

lonDon
ManCHESTer
BiRmiNGHAM
liVERpoOL
첫 문자를 대문자로 변경하고 나머지는 소문자로 바꿔주자

const list = document.querySelector('.output ul');
list.innerHTML = '';
let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
for (let i = 0; i < cities.length; i++) {
let input = cities[i];
let lower = input.toLowerCase();
let firstLetter = lower.slice(0,1);
let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());
let result = capitalized;
let listItem = document.createElement('li');
listItem.textContent = result;
list.appendChild(listItem);
}

profile
민트초코

0개의 댓글

관련 채용 정보