JavaScript에서 문자열과 정수 연결

1. JavaScript에서 템플릿 문자열을 사용하여 문자열과 정수 연결
2. JavaScript에서 + 연산자를 사용하여 문자열과 정수 연결

JavaScript로 웹 애플리케이션을 개발할 때마다 우리는 항상 모든 유형의 변수(정수, 부동 소수점 등)를 문자열과 연결하려는 상황에 직면합니다. 이것은 일반적인 시나리오입니다.

이 기사에서는 템플릿 문자열 기능과 + 연산자를 사용하여 JavaScript에서 문자열 값을 정수 값과 연결하는 방법을 설명합니다.

JavaScript에서 템플릿 문자열을 사용하여 문자열과 정수 연결

JavaScript의 템플릿 문자열을 사용하면 주어진 문자열 값 내에서 모든 유형의 변수를 추가할 수 있습니다. 백틱(`) 문자는 템플릿 문자열을 나타냅니다.

따라서 이 기능을 사용하려면 백틱 문자 안에 문자열을 묶어야 합니다.

여기서는 전통적인 큰따옴표 연산자(" ")를 사용하지 않습니다. 템플릿 문자열은 템플릿 리터럴이라고도 합니다.

템플릿 문자열 기능은 JavaScript의 ES6 버전에서 도입되었습니다.

아래와 같이 값이 8인 문자열과 정수 변수 value가 있다고 가정해 보겠습니다. 변수 value의 값을 문자열과 연결한 다음 콘솔에 인쇄하는 것을 목표로 합니다.

코드 조각 - JavaScript:

let value = 8;
console.log('Number is the value.');

출력:

Number is the value.

이렇게 하려면 먼저 문자열의 큰따옴표(" ")를 백틱 문자(`)로 바꿔야 합니다.

문자열을 역따옴표로 묶은 후 문자열 내 임의의 위치에 value 변수를 연결하거나 삽입할 수 있습니다. 이를 위해서는 ${}를 사용해야 합니다.

그리고 이 안에 아래와 같이 ${value} 변수를 추가합니다.

코드 조각 - JavaScript:

let value = 8;
console.log(`Number ${value} is the value.`);

출력:

Number 8 is the value.

보시다시피 8 값이 문자열 내에 인쇄됩니다. 문자열을 변수와 연결하려고 할 때마다 문자열 리터럴의 개념을 사용합니다.

마찬가지로 이 기능을 사용하여 문자열에 모든 유형의 많은 변수를 연결할 수 있습니다.

JavaScript에서 + 연산자를 사용하여 문자열과 정수 연결

JavaScript의 + 연산자는 문자열을 정수와 연결할 수도 있습니다. 위에서 본 것과 동일한 예를 사용하지만 템플릿 문자열 대신 + 연산자를 사용합니다.

코드 조각 - JavaScript:

let value = 8;
console.log('Number ' + value + ' is the value.');

출력:

Number 8 is the value.

여기서 우리는 문자열에 전통적인 큰 따옴표를 사용해야 하며 정수 변수 value를 문자열과 연결하려는 위치에서 먼저 큰 따옴표를 닫아야 합니다. 그런 다음 value 변수 앞뒤에 + 연산자를 사용합니다.

그런 다음 위에 표시된 것처럼 큰따옴표를 사용하여 나머지 문자열을 다시 계속할 수 있습니다.

+ 연산자를 사용하는 동안 유일한 문제는 문자열 사이에 많은 변수를 연결하려는 경우 아래와 같이 여러 + 연산자를 사용하여 문자열을 분리해야 한다는 것입니다.

문자열과 연결하려는 변수가 많은 경우 코드를 읽고 이해하는 동안 문제가 발생할 수 있습니다.

코드 조각 - JavaScript:

let value1 = 8;
let value2 = 16;
let value3 = 24;

console.log('Table of ' + value1 + ' has values ' + value2 + ' and ' + value3);

출력:

Table of 8 has values 16 and 24

따라서 가능한 한 ES6의 템플릿 리터럴 기능을 사용하는 것이 항상 권장됩니다. 그리고 문자열과 연결해야 하는 변수가 거의 없는 경우 + 연산자를 사용할 수 있습니다.