자바스크립트 문자열 접근하기

자바스크립트 문자열 접근하기

 

 

 

 

문자열을 다루는 방법에 대해 살펴보겠습니다.

 

💜 원시 유형과 객체

단순히 값만 가지고 있을 경우 원시 유형이고 프로퍼티와 메서드를 가지고 있을 때는 객체 라고 설명했습니다.

그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다.

 

문자열을 만들때 다음의 소스처럼 간단히 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용해보세요

str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다.

 

let str = "hello"
str.length //5

 

자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다.

즉 숫자는 Number객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 래퍼객체 라고 부릅니다.

 

boolean -> Boolean 객체

number -> Nunmber객체

string -> String객체

 

*오토박싱

필요할때만 임시로 객체로 바꿔 사용하고 사용이 끝난 후엔 다시 원시 유형으로 되돌아오는 것

 

💜 length 프로퍼티

-문자열의 길이를 찾을 때는 배열에처럼 length 프로퍼티를 사용합니다.

문자열.length

let str = "Good morning!";
let greeting = "안녕하세요?"
str.length  //14
greeting.length  //6

콘솔창에서 다음의 소스를 입력해 보면

str 문자열에 포함된 공백도 문자열의 길이에 포함되는 것을 알 수 있습니다.

 

 

💜 문자열에서 문자의 위치 활용

-charAt(), indexOf() 메서드

 

charAt() 메서드

-특정 위치의 문자 접근하기

문자열.charAt(위치)

let str = "Good moring!";
str.charAt(3)   //"d"
str[5]   //'m'

문자열에서 첫 번째 문자는 인덱스 0에 위치하며

charAt()메서드를 사용해 해당 위치의 문자를 얻을 수 있습니다.

 

 

indevOf()메서드

-괄호 안의 문자열이 나타난 위치를 알려 주고 위치 값을 생략할 경우에는 문자열이 나타난 첫 번째 위치를 알려줍니다.

indexOf(문자열)
indexOf(문자열, 위치)

let srt1 = "Good mornig, everyone. Beautiful morning."
str1.indexOf("mornig") //5
str1.indexOf("evening") //-1

찾는 문자열이 없으면 -1을 반환합니다.

 

💜 문자열에 어떤 문자가 있는지 확인하기

startsWith(), endsWith(), includes() 메서드

 

startsWith()

-특정 문자나 문자열로 시작하는지 확인하기

문자열.startsWitdth(문자 또는 문자열)

str2 = "Hello, everyone."
str2.startsWith("Hello")//true
str2.startsWith("hello")//false
str2.startsWith("He")//true
str2.startsWith("Hello, ev")//true

 

문자열.startsWidth(문자 또는 문자열, 위치)

// str2 = "Hello, everyone."
str2.startsWith("el", 1)//true
str2.startsWith("o", 4)//true

인덱스 1은 el로 시작하고 인덱스 4는 0으로 시작합니다.

따라서 모두 true 가 됩니다.

 

endsWith() 메서드

-문자열이 특정 문자나 문자열로 끝나는지 확인하기

문자열.endsWidth(문자나 문자열)

str2 = "Hello, everyone."
str2.endWith("everyone")//true
str2.endWith("Everyone")//false
str2.endWith("one")//true
str2.endWith("lo, everyone")//false

영문자의 대소문자를 구별합니다.

 

문자열.endsWidth(문자열, 길이)

str2.endsWith("one", 16) // true, 'Hello, everyone.'의 마지막은 one. 입니다
str2.endWith("lo", 5) //true, 'Hello'의 마지막은 lo입니다.

 

 

includes()

-문자열에 특정 문자나 문자열이 포함되어 있는지 확인하기

문자열.includes(문자열)

//str2 = "Hello, everyone."
str2.indexOf("every") !== -1 //true

원래는 위에처럼 사용해야 하지만 이제 

includes()메서드를 사용해 간단히 해결할 수 있습니다.

str2.incudes("every")  //true

 

 

 

 

 

문자열 메서드 활용하기

 

💜 문자열에서 공백 제거하기

-

trim()메서드✏문자열의 앞뒤 공백을 제거

trimStart()메서드✏문자열의 앞쪽 공백을 제거

trimEnd()메서드✏문자열의 뒤쪽 공백을 제거

let str3 = " ab cd df "
str3.trim()  //'ab cd ef'
str3.trimStart()  //'ab cd ef '
str3.trimEnd()  //' ab cd ef '

 

 

 

💜 문자열의 대소문자 바꾸기

-

toUpperCase()메서드✏문자열을 모두 대문자로 변환

toLowerCase()메서드✏문자열을 모두 소문자로 변환

 

 

 

💜 부분 문자열 추출하기

substring()메서드✏시작 위치부터 끝 위치의 직전까지 추출해서 반환

문자열.substring(시작 위치)
문자열.substring(시작 위치, 끝 위치)

slice()메서드✏시작 위치만 지정하면 해당 위치부터 끝까지, 시작 위치와 끝 위치를 함께 지정하면 시작 위치부터  끝 위치 직전까지 추출.

문자열.slice(시작 위치)
문자열.slice(시작 위치, 끝 위치)

 

 

💜 구분자에 따라 문자 쪼개기

-

split()메서드✏문자열에서 구분자를 기준으로 문자열을 쪼개 줍니다.

문자열.split(구분자)

str5 = "Hello everyone"
array1 = str5.split(" ")  //[Hello", "everyone"}

문자열을 단어별로 구별하려면 구분자를 공백으로 지정해 실행합니다.