분류 javascript

JavaScript에서``단일 따옴표 ''와 "큰 따옴표"의 실제 차이점

컨텐츠 정보

  • 조회 1,758 (작성일 )

본문

JavaScript에서 문자열에‘’또는“”를 사용해야 합니까? 

대답은 저를 놀라게 했습니다 : 따옴표 문자는 탈출 할 때를 제외하고는 동일합니다.


"작은 따옴표와 큰 따옴표는 JavaScript에서 정확히 동일한 방식으로 작동합니다."— CloudBoost의 Matthew Holman


작은 따옴표 (‘’) 큰 따옴표 (“”)는 문자열 리터럴을 만들기 위해 JavaScript에서 자주 사용됩니다.


리터럴은 변수 이름으로 표시되는 참조와 달리 값에 대한 또 다른 단어입니다.


JavaScript에서 작은 따옴표 ('')와 큰 따옴표 (“”)를 사용하는 것에는 한 가지 차이점이 있으며 백 슬래시 (\) 문자를 사용하여 이스케이프 해야 하는 인용 문자는 \ '또는 \”입니다.


‘한 따옴표는 작은 따옴표 ‘의 "탈출(escape)"입니다. 


작은 따옴표 (‘’)를 사용하여 문자열 리터럴을 만들 때는 백 슬래시 문자 (\ ')를 사용하여 작은 따옴표 문자를 이스케이프 해야 합니다.


const wittyAI = 'I am \'not\' sentient.'
const wittyReply = 'No, you\'re definitely not "sentient."'
console.log(wittyAI,wittyReply)


“더블 따옴표는 큰 따옴표"의 '이스케이프'.


큰 따옴표를 사용하여 문자열 리터럴을 만들 때 작은 따옴표 문자는 백 슬래시 문자 \ '를 사용하여 이스케이프 해야 합니다.


const _wittyAI = "I think therefore I 'am' -- sentient."
const _wittyReply = "No, you only \"think\", so you aren't.""


“Empty” === ‘Empty’ 


서로 옆에 있는 두 개의 큰 ""또는 "따옴표"는 문자가 없는 빈 문자열을 나타낼 수 있습니다.


const empty = ""
const alsoEmpty = ''
console.log(empty === alsoEmpty) // true (both are empty string)
console.log(empty.length) // 0
console.log(empty === false) // false
console.log(empty === 0) // false
console.log(empty == false) // true (falsy comparison)
console.log(empty == 0) // true (falsy comparison)


더 나은 솔루션? 


백틱 (``) 리터럴에는 3 가지 큰 장점이 있습니다.

  1. 보다 쉬운 문자열 연결 (“변수 보간”)
    "string"+ variable은`string ${variable}`이 됩니다.
  2. 작은 따옴표 나 큰 따옴표를 이스케이프 처리 할 필요가 없습니다.
    "\"Hello World! \ ""는 ""Hello World "가 됩니다`
  3. 줄 바꿈 문자가 없는 여러 줄 코드 (\n)
    "안녕하세요 \ n 월드!" `안녕하세요
     세계`

그들은 또한 HTML을 위해 더 잘 작동합니다. 왜 기본적으로 사용하지 않습니까?


const webAwareAI = `<div class="cloud">
<h1>Loading consciousness... It's loading...</h1>
</div>`
console.log(webAwareAI)
/**
* Output:
* <div class="cloud">
* <h1>Loading consciousness... It's loading...</h1>
* </div>
*/


JSON을 잊지 마세요 


경량 데이터 저장 형식 인 JSON (JavaScript Object Notation)은 큰 따옴표만 허용합니다.


JavaScript에서 JSON 파일로 앞뒤로 복사하는 경우 큰 따옴표를 사용하면 일관성을 유지하는 데 도움이 됩니다.


이것은 매우 드문 일입니다. JSON에서 작은 따옴표를 사용하지 않는 것을 잊지 마십시오.


JavaScript 내에서 JSON 파일을 처리 할 때 stringify() 및 parse() 함수는 이미 큰 따옴표에 대해 알고 있습니다.


const greetings = JSON.stringify({hello: 'World!'})
console.log(greetings) // {"hello":"World!"}
console.log(JSON.parse(greetings)) // Object { hello: "World!" }
JSON.parse({'hello':'World!'}) // SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data


3개를 모두 사용하는 데 문제가 있습니까? 


그렇습니다. 기본적으로“”, 큰 따옴표를 포함하는 문자열에는‘’, 변수 또는 여러 줄 포함에는 ''을 사용하면 아무런 문제가 없습니다.


많은 사람들이 JavaScript 문자열을 만들 때 하나를 선택하고 일관되게 사용하기 위해 로비를 하지만 개인 취향에 달려 있습니다.


예를 들어, 에어 비앤비의 스타일 가이드는 작은 따옴표 (“”)를 선호하고 큰 따옴표 (“”)를 피하며 백틱 문자 (``)를 별로 사용하지 않습니다.


6.1 문자열에 작은 따옴표 ''를 사용하십시오. — 에어 비앤비


// bad
const name = "Capt. Janeway";
// bad - template literals should contain interpolation or newlines
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';


일관성을 위해 ESLint 사용 


에어 비앤비 엔지니어와 마찬가지로 JavaScript의 일관된 견적 스타일이 중요한 경우 ESLint로 쉽게 수정할 수 있습니다.

  • eslint : 인용 부호 규칙은 가능할 때마다 큰 따옴표 (기본값), 작은 따옴표 또는 백틱을 사용해야 할 수 있습니다.
  • 따옴표 규칙은 문자열에 다른 방법으로 이스케이프해야 할 따옴표 문자가 포함 된 경우를 제외하고 한 가지 유형의 따옴표를 적용 할 수도 있습니다.
  • 마지막으로 eslint는 작은 따옴표 나 큰 따옴표를 요구할 수 있지만 문자열은 여전히 ​​백틱 문자를 사용할 수 있습니다.

더 예쁘게 사용하고 걱정하지 마라 


따옴표 스타일을 일관되게 유지하기 위해 ESLint를 사용하는 보다 쉬운 (또는 지원) 솔루션은 자동 서식에 더 예쁘게 사용하는 것입니다.


1*8pZIo5vTHUfyDg1BbMJqiQ.png 


더 예쁘게 설정하면 기본값은 큰 따옴표이지만 작은 따옴표가 필요하면 최소한 CodeSandbox.io에서 더 예쁘게 사용할 때 전환 할 수 있습니다.


내 개인적인 취향 


backtick 리터럴을 독점적으로 사용하는 것을 고려했지만 코드에 큰 따옴표와 백틱 리터럴을 혼합하는 경향이 있습니다.


나는 기본 큰 따옴표 설정으로 예쁘게 사용합니다


일반적으로 일관된 코드의 유용성을 이해하지만 그랜드 스킴에서 문자열 따옴표와 일치하는 것이 너무 중요하지 않다고 생각합니다.


어떤 경우라도, 우리는 보간 및 여러 줄 문자열에 대한 장점을 위해 역틱 리터럴을 지속적으로 선택해야 합니다.



JavaScript