자바스크립트를 이용한 효과적인 문자열 조작 방법

안녕하세요 찐망고입니다.

오늘은 자바스크립트 문자열 관련 속성과 메서드를 따로 포스팅 해보려 합니다.

 

1. 문자열의 길이

•  length는 함수는 아니고, 숫자가 저장되는 프로퍼티
• 문자열의 길이를 저장 (갯수)

const txt = "Javascript";
console.log(txt.length); // 10

 

2. 특정 글자에 접근하기

• 문자열 내 특정 위치에 있는 글자에 접근하려면 [, ] 대괄호를 이용하거나 str.charAt() 메서드이용
• 위치는 0부터 시작.

let str = "Javascript";

//첫 번째 글자
console.log( str[0] ); // J
console.log( str.charAt(0) ); // J

// 마지막 글자
console.log( str[str.length - 1] ); // t

 

• 두 접근 방식의 차이는 반환할 글자가 없을 때 드러남
• [, ] 대괄호는 undefined를, charAt는 빈 문자열을 반환

let str = "Javascript";

//첫 번째 글자
console.log( str[100] ); // undefined
console.log( str.charAt(100) ); // ''

• foo..of를 사용하면 문자열을 구성하는 글자를 대상으로 반복 작업 가능

let str = "Javascript";

for(let char of str) {
	console.log(char); // J,a,v,a,s,c,r,i,p,t
}

• forEach도 가능, 문자열에 직접 사용은 불가, 배열로 변환한 후 사용 가능

 // ES5
let str = "Javascript";
Array.from(str).forEach(function(char) {
  console.log(char);
});

// ES6 화살표함수
let str = "Javascript";
Array.from(str).forEach(char => console.log(char));

 

 

3. 대, 소문자 변경하기

• 메서드 toLowerCase()와 toUpperCase()는 대문자를 소문자로, 소문자를 대문자로 변경 시킴

console.log("Javascript".toUpperCase()); // JAVASCRIPT
console.log("Javascript".toLowerCase()); // javascript

 

 

4. 부분 문자열 찾기

• str.indexOf - 문자열의 위치를 찾음, 부분 문자열을 찾으면 위치를 반환하고, 그렇지 않으면 -1을 반환

let str = "design publishing design"

console.log(str.indexOf("design")); // 0
console.log(str.indexOf("p")); // 7 (공백포함)
console.log(str.indexOf("d", 2)); // 18 두번째 반복된 d를 찾음

• if문의 조건식에서 indexOf사용시 0 반환 주의

let str = "design publishing design"

if(str.indexOf("design")) {
	console.log("나오나"); // 작동안함 
}

// 0을 반환하지만 0은 if문에서 false로 간주

if(str.indexOf("design") ! = -1) {
	console.log("나오나"); // 작동
}

 

 

 

5. HTML요소에서 문자열 

<p id="myParagraph">design publishing</p>

// <p> 요소를 가져와서 변수에 저장
let paragraph = document.getElementById("myParagraph");

// <p> 요소 안의 텍스트 추출하여 변수에 저장
let text = paragraph.innerText;

// 변수 출력
console.log(text); // "design publishing"