[ES6] 07. 문자열 백틱,${}

[ES6] 07. 문자열 백틱,${}

 

 

JS 문자열은 문자들의 집합입니다. 이 문자열은 작은 따옴표('')나 큰 따옴표("")로 묶여 있으며, 다음과 같은 예시와 같습니다.

```
let str1 = 'Hello world';  // 작은 따옴표 사용
let str2 = "Hello world";  // 큰 따옴표 사용
```

위의 두 예시 모두 "Hello world"라는 문자열을 변수에 할당한 것입니다.

JS 문자열은 수정 가능한 Mutable과 수정 불가능한 Immutable 두 가지 유형으로 나눌 수 있습니다. Mutable 문자열은 문자열 내의 문자를 변경할 수 있으며, Immutable 문자열은 변경할 수 없습니다. 대부분의 JS 문자열은 Immutable입니다.

```
let s = 'abc';                 // Immutable 문자열
s[0] = 'd';                    // 문자열 변경이 불가능하므로 에러가 발생합니다.
console.log(s);                // 'abc' 출력
```

다음은 문자열 관련 메서드를 사용한 예시 코드입니다.

```
let str = 'JavaScript tutorial';

// 문자열 길이
console.log(str.length);                // 20 출력

// 특정 위치의 문자 가져오기
console.log(str[0]);                    // 'J' 출력

// 문자열 일부 추출
console.log(str.substring(0, 4));       // 'Java' 출력
console.log(str.slice(4, 10));           // 'Script' 출력

// 문자열의 일부를 다른 문자열로 대체
console.log(str.replace('Java', 'Node'));  // 'NodeScript tutorial' 출력

// 문자열을 쪼개어 배열로 변환
console.log(str.split(' '));            // ["JavaScript", "tutorial"] 출력
```

입니다.

 

 

백틱과 {}의 관계,

 

JS 백틱(`)은 문자열 리터럴을 나타내는 또 다른 방법입니다. 문자열 리터럴을 작성할 때, 따옴표('') 또는 쌍따옴표("") 대신 백틱을 사용할 수 있습니다. 백틱은 템플릿 리터럴(Template Literal)이라고도 합니다.

백틱 안에서, `${ }`으로 둘러싸인 표현식을 넣을 수 있습니다. 이 표현식은 문자열 안에서 실행되고, 결과값이 문자열에 포함됩니다.

예시 코드로 살펴보겠습니다.

```
const name = 'Bob';
const age = 28;

// 문자열 템플릿 사용
const greeting = `My name is ${name} and I'm ${age} years old.`;
console.log(greeting);  // 출력: "My name is Bob and I'm 28 years old."
```

`${ }` 안에 들어가는 값은 JS 표현식입니다. 따라서 변수뿐만 아니라, 함수 호출문이나 산술 연산 등 다양한 표현식을 사용할 수 있습니다. 

```
// 템플릿 리터럴 안에서 산술 연산 표현
const num1 = 10;
const num2 = 5;
const result = `The result of ${num1} + ${num2} is ${num1 + num2}.`;
console.log(result);  // 출력: "The result of 10 + 5 is 15."
```

백틱은 여러 줄에 걸쳐 문자열을 작성하는 데에도 유용합니다.

```
// 여러 줄의 문자열 작성
const multiLine = `This is a string
that spans across
multiple lines`;
console.log(multiLine);
// 출력:
// This is a string
// that spans across
// multiple lines
```

따옴표('')나 쌍따옴표("")로는 여러 줄의 문자열을 작성하는 것이 불가능합니다.

 

백틱``과 ${ } 관계,

let name = 1;

let number = 9;

let str3 = `나는 ${name}명이고 
그룹은 ${number}이다`;

alert(str3);

백틱과 ${} 로 곱하기기능도 가능하다.

 

let name = 1;

let number = 9;

let str3 = `나는 ${name}명이고 
그룹은 ${number}이다`;

alert(`${name * number}`);

 

 

#js #jsfilms #jstutorial #урокиjs #jsчисла #jsстроки #jsфункции #jsобъекты #jsмассивы #jsdom #nextjs #reactjs #jsjokes #jshumor #jsserna #циклыjs

 

#백틱 #node.js #노드 #자바스크립트 #js #javascript #zerocho #lecture #강좌 #제로초 #프로그래밍 #programming #web #react #redux #mobx #nodejs #php #홈페이지 #제작 #코딩 #백엔드

 

#${} #dartमें${}क्याहै? #whatis${}influtter #{} #telusko #navin #reddy #tutorial #java #python #blockchain #django ##ps4share #playstation4 #elmo

 

#es6 #javascriptes6 #nioes6 #jses6 #es6classes #es6tutorial #es6javascript #learnes6 #es6course #es6modules #es6js #蔚来es6 #hoces6 #nioes6reviews