[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
'컴퓨터공부 > Javascript' 카테고리의 다른 글
[ES6] 08. (더하기) 연산자와 (빼기,곱하기) 연산자가 다르다. (0) | 2023.05.25 |
---|---|
[ES6] 07. 문자열 거듭제곱, 숫자 거듭제곱 (0) | 2023.05.25 |
[ES6] 06. 숫자형 [ Infinity, 음수 무한대(-Infinity) , NaN , BigInt ] (0) | 2023.05.25 |
[ES6] 05. 정적타입, 동적타입 (0) | 2023.05.25 |
댓글