자바스크립트 JS 공부 문자열

문자열은 숫자와 마찬가지로 변수를 선언하고 문자열 값으로 초기화한 다음 값을 반환

여기서 차이점은 문자열을 작성할 때 값을 따옴표로 묶어야 한다는 점.

 

따옴표, 쌍따옴표, 백틱

const single = 'single hello';
const double = "double hi";
const backtick = `backtick`;

console.log(single);
console.log(double);
console.log(backtick);

 

무엇을 사용하든 동일하게 나오고 개인 취향대로 사용하면 좋지만, 되도록이면 일관되게 사용하는 것이 좋다고 한다

 

* 백틱 특징

•  JavaScript 삽입 가능
•  여러 줄로 템플릿 리터럴 선언 가능

JavaScript 삽입

템플릿 리터럴 내에서 JavaScript 변수나 표현식을 ${ }로 감싸면 결과가 문자열에 포함됩니다.

const one = "Hello, ";
const two = "how are you?";
const joined = `${one}${two}`;
console.log(joined); // "Hello, how are you?"

 

"+"를 이용한 연결

템플릿 리터럴에만 ${}를 사용 가능하며, 일반 문자열은 사용 X.

하지만 ' + ' 연산자를 사용해서 일반 문자열을 연결 가능

const greeting = "Hello";
const name ="Chris";
console.log(greeting + ", " + name); // "Hello, Chris"

 

여러 줄로 템플릿 리터럴 선언 가능

const newline = `Hello World
I'm studying now`;
console.log(newline);

/* 
Hello World
I'm studying now
*/

 

이렇게 자바스크립트엔 다양하게 문자열을 사용할 수가 있다.

---

더 나아가서 문자열을 더 다양하게 사용한다면 

 

● length : 문자열의 길이 찾기

const browserType = "mozilla";
browserType.length; //7

 

mozilla는 7글자이기 때문에 결과 값을 7이 리턴되어야 한다

 

●  indexOf : 문자열 필터링 하고 싶을 때

browserType.indexOf("zilla"); //2
// zilla 가 mozilla의 2번 위치에 있어서 2 결과값이 나옴

browserType.indexOf("vanilla");
// -1

 

● Slice() : 문자열 내에서 문자열이 어디에서 시작되고 어떤 문자로 끝나는지 알고 싶을 때

browserType.slice(0,3); //moz

browserType.slice(2); //zilla

 

● toLowerCase() : 소문자로 바꾸기

● toUpperCase() : 대문자로 바꾸기

const radDate = "My NaMe Is MuD";
radData.toLowerCase(); // 'my name is mud'
radData.tuUpperCase(); // 'MY NAME IS MUD'

 

● replace(바꾸고 싶은 문자열, 바뀌었으면 하는 문자열) : 문자열의 일부 변경하기

browserType. replace("moz","van");
// mozilla -> vanilla