[JS] 문자 (String) (.slice, .replace, .match, .trim)

String: "", '', ``

문자데이터 '스트링'을 끝짱내보자.

 

우선 , 스트링에대한 MDN문서를 살펴보면....

-> https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

 

페이지 접속 GOGO.

대문자 S로 시작하는 String 이 보인다. 

String 의 설명을 읽어보면

String 전역(자바스크립트의 전체에서 사용할수있는 객체라는 뜻) 객체는

문자열(문자데이터를 의미) 의 생성자라고 되어있다.

 

여기서 생성자라는것은 string객체 앞에다가 new라는 키워드를 작성하여

뒷쪽에 가로를 열고 닫아 () 하나의 문자데이터를 만들 수 있다는 것이다.

그랬을때 우리는 지금까지 문자데이터에 ""나 '' 나 `` 기호를 사용하여

문자데이터를 만들어왔다. 이렇게 따옴표라는 기호를 통해서 만들어내는 방식을

리터럴 방식이라고 부른다고 배.웠.다.

기호를 통해서 손쉽게 데이터를 손쉽게 만들어내는 방식을 리터럴 방식이라하고

리터럴 방식이아니면 new라는 키워드를 통해서 자바스크립트에서 제공하는 각각의

전역객체들을 그때그때 데이터를 생성해줘야한다. (귀찬..)

(그래서 편리한 리터럴방식을 사용함!)

 

그럼 string 전역객체를 통해 실제로 사용할수있는 명령들을 살펴보자.

메소드에는 프로토타입이라는 개념이 붙어있고, 

그 뒤에는 앵커 엣 빅 등등 메소드들이 목록으로 되어있다.

여기서 싫어요 표시가 되어있는건 권장하지않는 기술들이기때문에 

보지않아도 된다. (실험표시는 많이 쓰이지않는 실험적인 기술)

 

너무 많아서 머리가 아프니 많이 쓸만한 메소드들에 대해서만 알아보자.

string.prototype.indexOf()

->indexOf() 메서드는 호출한 String객체에서 주어진 값과 일치하는 첫 번째

인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.

??????용어자체가 너무 어렵다. 쉽게 알아보자..

const 결과 = 'hello world!'.indexOf('world')
console.log(결과)

위에 코드를 보면 작은따옴표를 사용해서 'hello world'를 적고

.indexOf 메소드를 실행하고 있다.

인수로 'world'를 사용하게 되면 코드에서 반환되는 것이고,

그것을 결과라는 변수에 담아 출력해보면 숫자 6이 출력된다.

(여기서 제로베이스로 띄어쓰기도 값에 포함!)

const 결과 = 'hello world!'.indexOf('seo0')
console.log(결과)

이번에는 인수로 'seo0'이라는 값을 받고 있다.

결과로는.........??????

-1을 반환하고 있다. 일치하는 값이 없으면 -1을 반환한다는것이다.

 

 

이번엔 변수를 만들어서 문자데이터 '0123'을 적어보았다

글자 수를 알고 싶을땐, length라는 프로퍼티 속성으로 알아볼 수 있다.

출력하면 숫자 4가 뜨게 된다. (만약 띄어쓰기가 있다면 띄어쓰기도 문자로 포함시킨다.)

const str = '0123'
console.log('str'.length) //4

const str = '0 123'
console.log('str'.length) //5

더 간단한 방법으로는....직접적으로 

문자데이터 뒤에 length속성을 붙일 수 있다.

console.log('0123'.length) //4

이번엔 내가 원하는 문자값이 들어있니? 안들어있니?를 블린데이터로 

만들어보자.

const str = 'hello world!'
console.log(str.indexOf('seo0') !==  -1)  //false

비교연산자를 통해 만들어보면 'seo0'은 들어있지않으니 

-1을 반환할테고 -1 === -1은 같은 값으로 true가 나와야 정상이지만

앞에 !가 있으니 반대인 false값이 출력된다.

 

 

 

메소드 끝짱내기

.slice 

 

이번엔 .slice라는 메소드를 활용해보자.

인수를 두개를 넣어줄 수 있고, 0과 3을 넣어보았다.

const str = 'hello world!'
console.log(str.slice(0, 3)) //hel

hel이라는 문자가 출력되는것을 볼 수있다.

즉, .slice메소드는 제로베이스로 hel 이라는 0,1,2,번까지만 

추출이되서 콘솔에 출력이 되는것이고, 

두번째 인수로 사용한 3의 직전까지만 추출이되서 반환이된다는 것이다.

 

 

Q. 그럼 world!라는 단어만 추출을하고 싶으면 어떻게할까?

const str = 'hello world!'
console.log(str.slice(6, 12))

---

.replace

str.replace("찾을 문자열", "변경할 문자열")

 

.replace라는 메소드도 테스트해보자.

replace도 두개의 인수를 사용하는데 첫번째 인수는 world 두번째는

seo0을 넣어보았다.

const str = 'hello world!'
console.log(str.replace('world', 'seo0')) // hello seo0!

 

Q. replace메소드를 사용하여 hello라는 단어만 남기고 싶으면 어떻게할까?

const str = 'hello world!'
console.log(str.replace(' world!', '')) //hello

replace()함수는 제일 먼저 일차하는 패턴만 변환 후 바꿀뿐 모든 텍스트를 바꾸지 않는다.

그래서 모든 패턴을 바꾸고 싶을땐, '정규표현식'을 사용하면 된다. 

---

.match

이메일주소에서 아이디 값만 추출하고 싶을때, 사용하면 유용하다.

'정규표현식RegExp'을 활용해보자,

.match의 인수로 /.+(?=@)/ 난해해 보이지만 일단은 넣어보자.

저장을 해보면 하나의 배열데이터가 출력이 된다.

그럼 배열데이터의 첫번째 아이템으로 @주소가 제거된 문자가 

뜨게 된다. 배열데이터를 꺼내는 방법으로 간단하게 대괄호[0]를 적어

원하는 데이터를 출력할 수 있다. 

const str = 'dkanrjsk@naver.com'
console.log(str.match(/.+(?=@)/)[0]) //dkanrjsk

---

.trim

마지막으로 트림이라는 메소드를 살펴보자. 

공백을 없애주는 메소드인데..공백문자들은 별 의미가 없고,

보통 사용자들이 로그인을할때 아이디 값에 띄어쓰기를 놓고

입력한다면 공백도 하나의 문자이기 때문에

아이디가 제대로 인식이 안될 수도 있다. 그때 사용하는 메소드!

따로 들어가는 인수는 없고 그냥 호출하면 된다.

const str = '      hello world   '
console.log(str.trim()) //hello world