자바스크립트에서 + 연산자를 이용하여 문자열 합치기: 예제와 활용 방법

 

Javascript + 연산자로 문자열 합치기

자바스크립트에서 + 연산자를 사용하여 문자열을 합치는 방법에 대해 알아보겠습니다.

 

 

 

 

728x90

자바스크립트의 + 연산자와 문자열 합치기

 

자바스크립트에서 + 연산자는 숫자 덧셈 외에도 문자열을 결합하는 데 사용됩니다. 숫자의 경우, 두 숫자를 더하는 산술 연산을 수행하지만, 문자열의 경우, 두 문자열을 하나로 결합합니다.

 

 

 

예제: 간단한 문자열 결합하기

 

다음은 가장 기본적인 형태의 예제입니다:

let str1 = "Hello";
let str2 = "World";
let result = str1 + " " + str2;

console.log(result); // 출력: Hello World

 

위 코드에서 우리는 " "(공백)과 함께 str1과 str2를 결합하여 "Hello World"라는 결과값을 얻었습니다.

 

 

 

변수와 리터럴 결합하기

 

문자열 리터럴과 변수를 결합할 수도 있습니다:

let name = "John Doe";
let greeting = "Hello, my name is " + name;

console.log(greeting); // 출력: Hello, my name is John Doe

위 코드에서 우리는 "Hello, my name is "라는 리터럴과 name 변수를 결합하였습니다.

 

 

 

여러 변수와 리터럴 함께 사용하기

 

여러 개의 변수와 리터럴들도 함께 섞어서 사용할 수 있습니다:

let firstName = "John";
let lastName = "Doe";
let age = 30;
let introduction = "Hi! I'm "+ firstName +" "+ lastName +" and I'm "+ age +" years old.";

console.log(introduction); 
// 출력: Hi! I'm John Doe and I'm 30 years old.

이처럼 여러 개의 변수와 리터럴들이 복잡하게 섞여 있는 경우에는, ES6에서 도입된 템플릿 리터럴(Template Literal)을 사용하는 것이 더 편리할 수 있습니다.

 

 

 

템플릿 리터럴 활용하기

 

위의 예제를 템플릿 리터럴을 사용하여 작성하면 다음과 같습니다:

let firstName = "John";
let lastName = "Doe";
let age = 30;
let introduction = `Hi! I'm ${firstName} ${lastName} and I'm ${age} years old.`;

console.log(introduction); 
// 출력: Hi! I'm John Doe and I'm 30 years old.

템플릿 리터럴은 백틱(``)으로 둘러싸인 문자열 내에서 ${} 구문을 이용하여 변수나 식을 직접 삽입할 수 있게 해 줍니다. 이를 활용하면 코드가 보다 간결해지고 가독성이 높아집니다.

 

 

 

마무리

 

자바스크립트에서 + 연산자를 이용하여 문자열 합치기는 매우 간단하지만 유용한 기능입니다. 복잡한 문자열 조합의 경우, 템플릿 리터럴을 활용하면 보다 쉽고 간결하게 작성할 수 있습니다.

더 많은 예시와 실전 활용 사례들은 공식 문서나 참고 자료들에서 확인하실 수 있으니 궁금한 점이 있다면 찾아보세요!

Happy coding! 😊

이상으로 "자바스크립트에서 + 연산자를 이용하여 문자열 합치기: 예제와 활용 방법에 대해 알아보았습니다.