JS에서 백틱(``) 과 작은따옴표, 그리고 큰따옴표로 문자열을 묶는 차이

Q1.

JS에서 주소를 걸 때, `` 와 '' 또는 "" 셋 중 아무거나로 주소 경로를 감쌀 수 있는거야?

예를 들어서, 지금은 주석처리 되어있지만, let data = await axiosHelper.get([[@{/api/department}]]/${deptno}); // ''? ``? ""?

이 코드에서, get() 안에 ``로 묶든, '' 로 묶든, "" 로 묶든 차이가 없는거 아니야?

 

 

 

A1.

JavaScript에서 문자열을 감쌀 때 \``, '', ""` 세 가지를 사용할 수 있지만, 기능상 차이가 있습니다.

 

1) **백틱(```)**: 템플릿 리터럴로, ${변수} 형태로 변수나 표현식을 문자열 내에 삽입할 수 있습니다.

 

2) 작은따옴표(')/큰따옴표("): 일반 문자열로, ${...}를 그대로 문자열로 인식합니다.

 

 

따라서 ${deptno} 변수를 문자열에 포함하려면 백틱을 사용해야 합니다. 예를 들어:

 

let data = await axiosHelper.get(`/api/department/${deptno}`);

 

백틱을 사용하면 deptno 변수의 값이 문자열에 삽입됩니다. 반면에 작은따옴표나 큰따옴표를 사용하면 ${deptno}가 그대로 문자열로 처리되어 변수 값이 반영되지 않습니다.

따라서 해당 코드에서는 백틱(```)을 사용하는 것이 맞습니다.

 

 

 

Q2.

즉, 일반적인 문자열을 감쌀 때에는 차이가 없으나, 감싸려는 문자열 안에 변수나 표현식을 삽입하려면, ``으로 묶어야 한다는 말인거야?

 

 

 

A2.

네, 정확합니다. 일반적인 문자열을 감쌀 때는 작은따옴표('), 큰따옴표("), 백틱()을 모두 사용할 수 있으며, 기능상 차이가 없습니다. 그러나 **문자열 안에 변수나 표현식**을 포함하려면 **백틱**()을 사용해야 합니다.

 

예를 들어, 변수 deptno의 값을 문자열에 포함하려면 백틱과 ${}를 사용합니다:

 

let data = await axiosHelper.get(`/api/department/${deptno}`);

 

이렇게 하면 ${deptno} 부분이 변수의 값으로 대체됩니다. 반면에 작은따옴표나 큰따옴표를 사용하면 ${deptno}가 그대로 문자열로 인식됩니다:

 

// 변수 값이 아닌 문자열 "${deptno}" 자체로 인식됨
let data = await axiosHelper.get('/api/department/${deptno}');

 

따라서 변수나 표현식을 문자열에 삽입하려면 백틱(````)을 사용해야 합니다.

 

 

 

Q3.

이건 JS만의 특징인가?

 

 

 

네, 이 특징은 JavaScript 고유의 기능인 템플릿 리터럴에 해당합니다. 템플릿 리터럴은 문자열 안에 ${변수} 형식으로 변수를 직접 삽입할 수 있도록 해주며, 문자열을 백틱(<code>`</code>)으로 감싸서 사용합니다.

 

다른 프로그래밍 언어에서도 문자열에 변수를 삽입하는 기능이 있지만, 문법과 사용 방법은 각 언어마다 다릅니다.

 

 

예를 들어:

• Python에서는 f-문자열을 사용합니다:
  name = 'Alice'

  print(f'Hello, {name}')
• Java에서는 문자열 연결 연산자 +를 사용합니다:
  String name = "Alice";

  System.out.println("Hello, " + name);
• Ruby에서는 "#{변수}" 형식을 사용합니다:
  name = "Alice"

  puts "Hello, #{name}"

따라서 백틱()과 ${}`를 사용하여 문자열 안에 변수를 삽입하는 문법은 JavaScript만의 특징입니다. 다른 언어에서는 이와 다른 방법으로 변수 삽입을 지원하므로, 이 점을 유의해야 합니다.