JavaScript에서 문자열을 조합하는 4가지 방법

여기에는 JavaScript에서 문자열을 조합하는 네 가지 방법이 있습니다.내가 가장 좋아하는 방법은 템플릿 문자열을 사용하는 것이다.왜?왜냐하면 그것은 더욱 읽을 수 있기 때문이다. 반사봉 전의적 인용부호도, 서투른 공백 구분부호도, 더 혼란스러운 가호 연산자도 없다👏

const icon = '👋';

// Template Strings
`hi ${icon}`;

// join() Method
['hi', icon].join(' ');

// Concat() Method
''.concat('hi ', icon);

// + Operator
'hi ' + icon;

// RESULT
// hi 👋

1. 템플릿 문자열

루비와 같은 다른 언어에서 온 경우 용어 문자열 삽입 값에 익숙해집니다.이것이 바로 템플릿 문자열이 실현하려고 시도한 것이다.이것은 문자열 생성에 표현식을 포함하는 간단한 방법으로 읽을 수 있고 간결하다.

const name = 'samantha';
const country = '🇨🇦';

문자열 연결의 공백 부족 문제

템플릿 문자열 이전에 이것은 나의 문자열의 결과가 될 것이다😫

"Hi, I'm " + name + "and I'm from " + country;

☝️ 너는 나의 잘못을 발견했니?제가 공간을 놓쳤어요.😫. 문자열을 연결할 때, 이것은 매우 흔히 볼 수 있는 문제이다.

// Hi, I'm samanthaand I'm from 🇨🇦

템플릿 문자열을 사용하여 확인

템플릿 문자열을 통해 이 문제를 해결할 수 있습니다.문자열의 표시 방식을 정확하게 작성할 수 있습니다.그래서 빈칸이 없는지 쉽게 발견할 수 있다.지금은 매우 읽을 만하다, 예!👏

`Hi, I'm ${name} and I'm from ${country}`;

2.join（）

join 방법은 그룹 요소를 조합하고 문자열을 되돌려줍니다.그룹과 함께 작동하기 때문에 다른 문자열을 추가하려면 매우 편리합니다.

const array = ['My handles are'];
const handles = [instagram, twitter, tiktok].join(', '); // @samanthaming, @samantha_ming, @samanthaming

array.push(handles); // ['My handles are', '@samanthaming, @samantha_ming, @samanthaming']

array.join(' '); 

// My handles are @samanthaming, @samantha_ming, @samanthaming

사용자 정의 구분자

join의 장점은 그룹 요소의 조합 방식을 사용자 정의할 수 있다는 것이다.그 매개 변수에 구분자를 전달함으로써 이 점을 실현할 수 있다.

const array = ['My handles are '];
const handles = [instagram, twitter, tiktok].join(', '); // @samanthaming, @samantha_ming, @samanthaming

array.push(handles);

array.join('');

// My handles are @samanthaming, @samantha_ming, @samanthaming

3.concat（）

concat를 사용하면 문자열 호출 방법을 사용하여 새 문자열을 만들 수 있습니다.

const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';

'My handles are '.concat(instagram, ', ', twitter', ', tiktok);

// My handles are @samanthaming, @samantha_ming, @samanthaming

문자열 및 배열 조합

또한 concat 를 사용하여 문자열과 그룹을 조합할 수 있습니다.내가 그룹 파라미터를 전달할 때, 그룹 항목을 쉼표 , 로 구분된 문자열로 자동으로 변환합니다.

const array = [instagram, twitter, tiktok];

'My handles are '.concat(array);

// My handles are @samanthaming,@samantha_ming,@samanthaming

형식이 더 좋으면 join 사용자 정의 구분자를 사용할 수 있습니다.

const array = [instagram, twitter, tiktok].join(', ');

'My handles are '.concat(array);
// My handles are @samanthaming, @samantha_ming, @samanthaming

4. 더하기 연산자(+)

문자열을 조합할 때 + 연산자를 사용하는 것은 재미있는 일이다.새 문자열을 만들거나 기존 문자열에 첨부하여 변경할 수 있습니다.

비돌변적

여기에서 우리는 + 를 사용하여 새로운 문자열을 만듭니다.

const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';

const newString = 'My handles are ' + instagram + twitter + tiktok;

돌연변이했어

또한 += 를 사용하여 기존 문자열에 추가할 수 있습니다.따라서 어떤 이유에서든 변이적인 방법이 필요하다. 이것은 당신의 선택일 수도 있다.

let string = 'My handles are ';

string += instagram + twitter;

// My handles are @samanthaming@samantha_ming

오, 빌어먹을😱 또 공간을 잊어버렸다.봐라!문자열을 연결할 때 빈칸이 빠지기 쉽다.

string += instagram + ', ' + twitter + ', ' + tiktok;

// My handles are @samanthaming, @samantha_ming, @samanthaming

여전히 혼란스러우니 join 던져봅시다!

string += [instagram, twitter, tiktok].join(', ');

// My handles are @samanthaming, @samantha_ming, @samanthaming

문자열의 이스케이프 문자

문자열에 특수 문자가 있을 때, 조합할 때 먼저 이 문자들을 정의해야 한다.어떻게 그것들을 벗어날 수 있는지 몇 가지 장면을 봅시다💪

큰따옴표 또는 삐침표 (')

문자열을 만들 때 따옴표 또는 따옴표를 사용할 수 있습니다.이러한 지식을 이해하면 문자열에 인용부호가 하나만 있을 때 매우 간단한 해결 방안은 상반된 방법으로 문자열을 만드는 것이다.

const happy = 🙂;

["I'm ", happy].join(' ');

''.concat("I'm ", happy);

"I'm " + happy;

// RESULT
// I'm 🙂

물론 문자를 이스케이프하려면 백슬래시\를 사용할 수도 있습니다.그러나 나는 그것이 좀 읽기 어렵다는 것을 발견했기 때문에 나는 자주 이렇게 하지 않는다.

const happy = 🙂;

['I\'m ', happy].join(' ');

''.concat('I\'m ', happy);

'I\'m ' + happy;

// RESULT
// I'm 🙂

템플릿 문자열은 역기호를 사용하기 때문에 이 경우에는 적용되지 않습니다.👍

이중 따옴표("")

전의 단인용부호와 유사하게 우리는 상반된 인용부호를 사용하는 같은 기술을 사용할 수 있다.그래서 이중 따옴표를 바꾸기 위해 우리는 단일 따옴표를 사용할 것이다.

const flag = '🇨🇦';

['Canada "', flag, '"'].join(' ');

''.concat('Canada "', flag, '"');

'Canada "' + flag + '"';

// RESULT
// Canada "🇨🇦"

예, 백슬래시 이스케이프 문자를 사용할 수도 있습니다.

const flag = '🇨🇦';

['Canada "', flag, '"'].join(' ');

''.concat('Canada "', flag, '"');

'Canada "' + flag + '"';

// RESULT
// Canada "🇨🇦"

템플릿 문자열은 역기호를 사용하기 때문에 이 경우에는 적용되지 않습니다.👍

전의반호

템플릿 문자열은 백슬래시를 사용하여 문자열을 만들기 때문에 이 문자를 출력하려면 백슬래시를 사용해야 합니다.

const flag = '🇨🇦';

`Use backtick \`\` to create a template string`;

// RESULT
// Use backtick `` to create a template string

다른 문자열 생성은 백틱을 사용하지 않았기 때문에 이 경우 적용되지 않습니다👍

어떤 방식을 사용합니까?

나는 서로 다른 방식으로 문자열을 연결하는 예시를 몇 개 보여 주었다.어떤 방식이 더 좋은지는 구체적인 상황에 달려 있다.스타일 선호에 대해 말하자면, 나는 Airbnb 스타일 안내서를 따르는 것을 좋아한다.

When programmatically building up strings, use template strings instead of concatenation. eslint: prefer-template template-curly-spacing

따라서 템플릿 문자열의 승리!👑

왜 다른 방식은 여전히 중요합니까?

다른 방법을 아는 것도 중요하다.왜?모든 코드 라이브러리가 이 규칙을 따르지 않거나, 남겨진 코드 라이브러리를 처리하고 있을 수도 있습니다.개발자로서 우리는 우리가 처한 어떤 환경에도 적응하고 이해할 수 있어야 한다.우리는 문제를 해결하러 온 것이지, 기술이 얼마나 낡았는지 불평하는 것이 아니다. 하하😂 불평과 동시에 절실한 실행을 취해 개선하지 않으면그리고 우리는 진전을 거두었다👏

브라우저 지원

브라우저
템플릿 문자열
참가하다
콘카트
+
Internet Explorer
❌
✅ IE 5.5
✅ IE 4
✅ IE 3
가장자리
✅
✅
✅
✅
크롬
✅
✅
✅
✅
Firefox
✅
✅
✅
✅
사냥하다
✅
✅
✅
✅

리소스

MDN Template Literals

MDN: concat

MDN: join

MDN: +

Stack Overflow: Most efficient way to concatenate strings in JavaScript?

3 Ways to Concatenate Strings

Digital Ocean: How To Work with Strings in JavaScript

Airbnb Style Guide

ESLint: prefer-template

SamanthaMing: How to Create Multi-Line String with Template Literals

SamanthaMing: join

읽어주셔서 감사합니다.❤
코드 에피소드를 더 알고 싶으면 방문samanthaming.com
🎨
🌟
👩🏻‍💻