다음은 JavaScript에서 문자열을 결합하는 네 가지 방법입니다. 내가 가장 좋아하는 방법은 템플릿 문자열을 사용하는 것입니다.
왜? 더 읽기 쉽고 따옴표를 이스케이프하는 백 슬래시가 없으며 어색한 빈 공간 구분 기호가 없으며 더 이상 지저분한 + 연산자가 없습니다 ?
https://medium.com/dailyjs/4-ways-to-combine-strings-in-javascript-b1de5302fdaa
const icon = '?';// Template Strings
`hi ${icon}`;// join() Method
['hi', icon].join(' ');// Concat() Method
''.concat('hi ', icon);// + Operator
'hi ' + icon;// RESULT
// hi ?
1. 템플릿 문자열
Ruby와 같은 다른 언어에서 온 경우 문자열 보간이라는 용어에 익숙 할 것입니다. 이것이 바로 템플릿 문자열이 달성하려는 것입니다. 문자열 생성에 읽기 쉽고 간결한 표현식을 포함하는 간단한 방법입니다.
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 instagram = '@samanthaming';
const twitter = '@samantha_ming';
const array = ['My handles are ', instagram, twitter];const tiktok = '@samantaming';array.push(tiktok);array.join(' ');// My handles are @samanthaming @samantha_ming @samanthaming
구분자 사용자 지정
조인의 가장 좋은 점은 배열 요소가 결합되는 방식을 사용자 지정할 수 있다는 것입니다. 매개 변수에 구분 기호를 전달하여 이를 수행 할 수 있습니다.
const array = ['My handles are '];
const handles = [instagram, twitter, tiktok].join(', '); // @samanthaming, @samantha_ming, @samanthamingarray.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. Plus Operator (+)
문자열을 결합 할 때 + 연산자를 사용할 때 흥미로운 점이 하나 있습니다. 를 사용하여 새 문자열을 만들거나 기존 문자열을 추가하여 변형 할 수 있습니다.
Non-Mutative
여기서는 +를 사용하여 새로운 문자열을 만듭니다.
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';const newString = 'My handles are ' + instagram + twitter + tiktok;
Mutative
+ =를 사용하여 기존 문자열에 추가 할 수도 있습니다. 따라서 어떤 이유로 든 돌연변이 접근 방식이 필요하다면 이것이 옵션이 될 수 있습니다.
let string = 'My handles are ';string += instagram + twitter;// My handles are @samanthaming@samantha_ming
OH 젠장 ? 다시 공간을 잊어 버렸습니다. 보다! 문자열을 연결할 때 공백을 놓치기 쉽습니다.
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 "??"
템플릿 문자열은 백틱을 사용하기 때문에 이 시나리오는 적용되지 않습니다 ?
Escape backtick (`)
템플릿 문자열은 백틱을 사용하여 문자열을 생성하기 때문에 해당 문자를 출력하려면 백 슬래시를 사용하여 이스케이프 해야 합니다.
const flag = '??';`Use backtick \`\` to create a template string`;// RESULT
// Use backtick `` to create a template string
다른 문자열 생성은 백틱을 사용하지 않기 때문에 이 시나리오는 적용되지 않습니다 ?
어떤 방법을 사용합니까?
문자열을 연결하는 다양한 방법을 사용하는 몇 가지 예를 보여주었습니다. 어느 쪽이 더 좋은지는 상황에 따라 다릅니다. 스타일 선호도에 관해서는 에어 비앤비 스타일 가이드를 따르고 싶습니다.
프로그래밍 방식으로 문자열을 빌드 할 때 연결 대신 템플릿 문자열을 사용합니다. eslint : 선호하는 템플릿 템플릿-곱슬 간격
그래서 승리를 위한 템플릿 문자열! ?
다른 방법이 여전히 중요한 이유는 무엇입니까?
다른 방법도 아는 것이 여전히 중요합니다. 왜? 모든 코드베이스가 이 규칙을 따르는 것은 아니거나 레거시 코드베이스를 다룰 수 있기 때문입니다. 개발자로서 우리는 어떤 환경에서든 적응하고 이해할 수 있어야 합니다. 기술이 얼마나 오래되었는지 불평하지 않고 문제를 해결할 수 있어야 합니다. ? 불평이 실질적인 개선 조치와 짝을 이루지 않는 한. 그리고 우리는 진전을 얻었습니다 ?
브라우저 지원
자원
등록된 댓글이 없습니다.
