[개발] 자바스크립트에서 문자열 표기와 태그펑션 tag function

By @minhoyoo5/9/2018kr

[개발] 자바스크립트에서 문자열 표기와 태그펑션 tag function

안녕하세요.

열심히 블록체인업계에서 꿈을 키우고 있는 minhoyoo 입니다


[이하는 ES6기준으로 작성하겠습니다]

간단하게 자바스크립트에서 문자열 표기하는 방법과b

ES6에서 사용할 수 있는 제가 새로 알게된 문법이 있어 공유하려합니다.

자바스크립트에서 문자열을 표기하려면 다음과 같이 표현 할 수 있죠

//1. '' 이용, quotation
console.log('\'안녕하세요\' "jjangjjangman" `짱짱`');
//'안녕하세요' "jjangjjangman" `짱짱`

```javascript //2. "" 이용, double quotation console.log("'안녕하세요' \"jjangjjangman\" `짱짱`"); //'안녕하세요' "jjangjjangman" `짱짱` ```
```javascript //3. `` 이용, back-tick console.log(`'안녕하세요' "jjangjjangman" \`짱짱\`"); console.log(`'안녕하세요' "jjangjjangman" \`짱짱\`${'스팀늅늅'} ${'가즈아'}`); //'안녕하세요' "jjangjjangman" `짱짱` //'안녕하세요' "jjangjjangman" `짱짱`스팀늅늅 가즈아 ```

그리고 태그 펑션 tag function 입니다.

아마 정확히는 javascript의 문자열문법(Tagged templates)에서의 Tagged templates pattern 이라고 해야 맞지 않을까 싶은데요.

형태는 다음과 같습니다


```javascript function tag(strings) { console.log(strings) console.log(strings.raw) console.log(strings.raw[0]) } tag`보팅은 ${'minhoyoo'} 에게 ${'큰'} 힘이 됩니다` // ["보팅은 ", " 에게 ", " 힘이 됩니다", raw: Array(3)] // ["보팅은 ", " 에게 ", " 힘이 됩니다"] // 보팅은 ```
이렇게도 사용할수 있네요. ```javascript const texts = [ {text: '보팅은'}, {text: '저에게'}, {text: '큰힘이'}, {text: '됩니다'} ] function say(arr, n) { console.log(arr[0] + n + arr[1] ); } texts.forEach((p) => { say` text: ${p.text} !!? `; }); ```
- - - 자바스크립트 내에서 문자열을 표현하는 방법이 여러가지 있네요.

어떤 문법들은 가독성 측면에서 안좋다 말이 많지만,
그래도 여러가지 알아두면 언젠가는 편하게 쓸 때가 있지 않을까 싶습니다.

^^..


참고
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals
https://codeburst.io/javascript-what-are-tag-functions-97682f29521b

9

comments