스택큐힙리스트

자바스크립트에서 여러 줄 문자열 만들기 본문

카테고리 없음

자바스크립트에서 여러 줄 문자열 만들기

스택큐힙리스트 2023. 12. 29. 03:56
반응형

다음은 루비로 작성된 코드입니다. 이 코드를 JavaScript로 변환하고 싶습니다. JS에서는 해당 코드의 동등한 코드는 무엇인가요?


text = <<HERE
This
Is
A
Multiline
String
HERE

답변 1

업데이트:


ECMAScript 6 (ES6)는 새로운 종류의 리터럴을 도입했습니다. 바로 템플릿 리터럴입니다. 이들은 변수 보간(interpolation) 등 여러 기능을 갖추고 있지만, 이 질문에 가장 중요한 점은 여러 줄로 구성될 수 있다는 것입니다.


템플릿 리터럴은 역따옴표(backticks)로 구분됩니다:


var html = `
<div>
<span>여기에 일부 HTML이 들어갑니다</span>
</div>
`;

(참고: 저는 문자열 내에 HTML을 사용하도록 권장하지 않습니다.)


브라우저 지원은 좋습니다, 그러나 더 호환성을 갖추기 위해 트랜스파일러(Transpiler)를 사용할 수 있습니다.


원본 ES5 답변:


Javascript에는 여기 문서(here-document) 구문이 없습니다. 그러나 리터럴 줄바꿈을 이스케이프(Escape)하는 것이 가능하므로, 거의 가능에 가깝습니다:

foo \
bar

foo \
bar

답변 2

JavaScript에서 여러 줄 문자열을 만드는 방법을 알아보려고 합니다.
JavaScript에서 문자열을 만들기 위해서는 따옴표를 사용합니다. 보통 한 줄의 문자열을 만들 때에는 작은 따옴표(')나 큰 따옴표()를 사용하여 감싸줍니다. 그러나 여러 줄에 걸친 문자열을 만들 경우, 공백과 개행문자를 추가해주어야 합니다. 예를 들어, 다음과 같이 작성하면 됩니다.
```javascript
var multilineString = '첫 번째 줄\n'
+ '두 번째 줄\n'
+ '세 번째 줄';
```
위의 코드에서는 '\n'을 사용하여 줄바꿈을 표시합니다. 또는 역슬래시(\)를 사용하여 줄 바꿈 문자를 이스케이프 할 수도 있습니다.
```javascript
var multilineString = '첫 번째 줄\
두 번째 줄\
세 번째 줄';
```
위의 방법 외에도, ES6(ECMAScript 2015)부터는 백틱(`)을 사용하여 템플릿 리터럴을 만들 수 있습니다. 이를 이용하면 여러 줄에 걸친 문자열을 더 간편하게 작성할 수 있습니다.
```javascript
var multilineString = `첫 번째 줄
두 번째 줄
세 번째 줄`;
```
템플릿 리터럴은 변수나 표현식을 문자열에 삽입할 때에도 사용할 수 있습니다. 이를 ${}에 넣어 사용하면 됩니다.
이렇게 JavaScript에서 여러 줄 문자열을 만드는 방법에는 다양한 방법이 있지만, 가독성과 유지 보수성을 고려하여 적절한 방법을 선택하는 것이 중요합니다.

반응형
Comments