자 오늘도 절겁게 자바스크립트 공부를 해봅시다
자바스크립트에서 문자를 사용하려면 ' ' 따옴표를 사용해 string 형태로 넣을 수 있다.
문자와 문자를 결합하고 싶다면 + 기호를 사용해야 한다.
하지만 백틱을 사용하면 좀 더 쉬워진다 !
Who is `` ?
백틱에 대해 검색해보면 이렇게 나온다.
Template literals
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.
출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
Syntax
` string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text`
Description
템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(``) (grave accent) 을 이용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다.
플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다. 템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다.
이 때, 태그 표현식 (주로 함수)이 처리된 템플릿 리터럴과 함께 호출되면, 출력하기 전에 조작할 수 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬()를 넣으십시오.
처음 백틱에 대해 배울 때 tab 키 위에 있다는데 이건가..? 이거..? 하면서 엄청 헤맸던 기억이 있다. ㅋㅋㅋㅋㅋ
그 때는 지금보다 더 뭐가 뭐인지 모를 때라 백틱이고 뭐고 왜 써야 되냐고 흑흑흑 했었는데,,,, 요번 기회에 백틱에 대해 염 염 씹어먹고 가겠다
1. 문자 안에 엔터키 삽입이 가능한 백틱
var 문자 라는 변수 안에 백틱을 사용해 엔터키를 넣어보았다.
var 문자 = `안녕
하세요`;
이런 것까지 된다고?
백틱은 됩니다
콘솔 창 열어보니 뾰로롱 나와있다
2. 문자와 문자를 결합할 때는 ${ }를 사용하는 백틱
var 이름 변수에 문자를 담아두고
var 인사 변수에 백틱과 ${} 사용해
안녕 나는 ${이름} 이야; 를 콘솔창에 출력하니
안녕 나는 혜진 이야 라는 한 문장으로 결합되어 잘 나온다 !
3. Tagged templates
Tagged templates
template literals 의 더욱 발전된 한 형태는 tagged templates 입니다.
태그를 사용하면 템플릿 리터럴을 함수로 파싱할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다.
결국 함수는 조작 된 문자열을 반환 할 수 있습니다 (또는 다음 예제에서 설명하는 것과 완전히 다른 결과를 반환 할 수 있습니다). function 이름은 원하는 어떤 것이든 가능합니다.
쉽게 말하면 함수로 문자 해체분석기능을 만들어줄 수도 있다는 뜻이다.
var 소비한것 = '애플워치';
function 해체하기(str, vari){
console.log(str);
console.log(vari);
}
해체하기2주 전 나는 ${소비한것} 를 샀다;
를 콘솔창에 입력하면
str 은 '2주 전 나는', '를 샀다' 이런 문자가 2개 나오고
vari 는 '애플워치' 가 나온다.
확인 !
백틱 안의 변수 속 ${ }안에 작성한 것과 = vari
백틱 속 string 문자를 ${}기준으로 앞 뒤로 끊어 출력해주는 기능이다.
프로그래밍이 되는 컴퓨터가 신기한 게 아니라 사실 프로그래밍은 사람이 머릿속에서 설계하고 구성하고 만드는 거라 사람이 대단한 거라고 생각하곤 했는데, 이럴 때보면 또 컴퓨터가 더 신기하고 대단하기도 하고....
오늘 요약
- `` 백틱을 사용하면 변수 안에 엔터키를 사용할 수 있다.
- `` 백틱 속에서 여러 문자를 결합하려면 ${}를 사용하면 손쉽게 여러 문자를 결합할 수 있다.
- 변수로 만들어둔 value 값과 string 문자를 따로 해체할 수 있는 기능이 있다.
내일은 백틱 예제도 풀어보고 react-native 공부도 슬슬 시작해봐야지!
react 시작하기 무서워서 npm start 못 쳐서 2주동안 겁먹고 아무것도 못했던 이번 여름과는 달리 혼자 이것저것 찾아보고 새로운 것도 배워보고자 하는 의지가 생겨 기쁘다.
내일두 화이팅!
