JavaScript에서 큰 따옴표 나 작은 따옴표를 사용하는시기


1968

console.log("double"); vs console.log('single');

문자열을 처리 할 때 작은 따옴표를 사용하여 점점 더 많은 JavaScript 라이브러리를 볼 수 있습니다. 다른 것을 사용하는 이유는 무엇입니까? 나는 그것들이 거의 상호 교환 가능하다고 생각했습니다.


125
어느 것이 더 읽기 쉬운가? alert ( "게임 시간"); 또는 경고 ( 'It \'s game time ');
Ryan Miller

591
이 라이언은 어때? alert("It's \"game\" time.");또는 alert('It\'s "game" time.');?
Francisc

37
작은 따옴표가 항상 사용되고 리터럴에 작은 따옴표가 포함 된 경우 때때로 큰 따옴표가 사용되는 경우 훨씬 적은 이동 버튼을 입력해야하며 왼쪽 작은 손가락은 우리에게 축복을 줄 것입니다. 그러나 @arne이 말했듯이 JSON에는 큰 따옴표를 사용해야합니다.
IsmailS

9
유럽식 키보드를 사용하는 경우 작은 따옴표를 사용하는 것이 더 쉽습니다 (큰 따옴표는 Shift + 2로 오른쪽 키로 편리하게 단일 키를 두드리는 것만 큼 달콤하지 않습니다).
Arne

38
@Arne "유럽 키보드"와 같은 것은 없습니다. 예를 들어 독일어 키보드 는 두 가지 유형의 따옴표 모두에 대한 이동이 필요합니다. (그러나 작은 따옴표가 더 쉽습니다.)
ANeves

답변:


1221

다른 라이브러리에서 싱글 대 더블을 사용하는 가장 큰 이유는 프로그래머 선호도 및 / 또는 API 일관성 때문입니다. 일관된 것이 아니라 문자열에 가장 적합한 것을 사용하십시오.

리터럴로 다른 유형의 따옴표 사용 :

alert('Say "Hello"');
alert("Say 'Hello'");

복잡해질 수 있습니다.

alert("It's \"game\" time.");
alert('It\'s "game" time.');

ES6의 새로운 또 다른 옵션은 문자 를 사용하는 템플릿 리터럴 입니다 back-tick.

alert(`Use "double" and 'single' quotes in the same string`);
alert(`Escape the \` back-tick character and the \${ dollar-brace sequence in a string`);

템플릿 리터럴은 변수 보간, 여러 줄 문자열 등을위한 깔끔한 구문을 제공합니다.

참고 JSON가 공식적으로 시스템 요구 사항에 따라 고려 가치가있을 수 있습니다 따옴표를 사용하도록 지정됩니다.


84
모든 코드 규칙에 유의해야 할 중요한 사항-한 번 정의하고 준수하십시오. IOW, 다른 곳에서는 큰 따옴표를 사용하지 말고 작은 따옴표를 사용하지 마십시오.
Cerebrus

170
@Cerebrus-이것으로 유연성이 좋다고 생각합니다. 물론 선호하는 스타일을 선택하십시오.하지만 스타일에서 벗어나서 많은 따옴표를 하나의 문자열로 저장 해야하는 경우. 나는 그걸로 괜찮을거야.
Martin Clarke

5
일관성을 유지해야 할 이유가 없다고 생각합니다. 어느 쪽이든 장점이 없으며, 한 곳에서 다른 곳에서 '를 사용하든 그렇지 않든 가독성이 실제로 영향을받지는 않을 것입니다.
cdmckay

2
@Olly Hicks, 재미있는 테스트 !! Chrome 13 (OSX)의 작은 따옴표는 실제로 큰 따옴표보다 몇 배 빠릅니다. 재미있는 ...
Ricket

12
주제를 조금 벗어 났지만 사람들이 올바른 타이포그래피를 사용했다면 탈출에 대한 이러한 논의는 많이 사용되지 않을 것입니다. alert('It’s “game” time')vs. alert("It’s “game” time")– 중요하지 않습니다. 당신은 단일 또는 이중 프라임 기호가 (희귀)의 경우 탈출해야 ', "실제로 적합합니다.
jotaen February

617

JSON을 다루는 경우 엄격하게 말하면 JSON 문자열은 큰 따옴표로 묶어야합니다. 물론 많은 라이브러리가 작은 따옴표도 지원하지만 문자열 중 작은 따옴표가 실제로 JSON 표준에 따르지 않는다는 것을 깨닫기 전에 프로젝트 중 하나에서 큰 문제가있었습니다.


5
이는 jQuery.ajax를 사용하여 ASP.NET 서비스 (웹 서비스, 페이지 메소드 또는 MVC)를 호출 할 때 매우 관련이 있습니다.
Schmuli

100
속성 이름 에서 json으로 문자열은 이중 인용해야하지만 전체 JSON 문자열은 단일 인용 될 수 있습니다 var jsonString = '{"key1":"value1"}';(I 추천 것을 수동으로 JSON을 구축하지 않습니다.)
NNNNNN

51
가능하면 JSON을 직접 작성해서는 안됩니다 .stringify().
Camilo Martin

23
바로 여기에 항상 큰 따옴표를 사용하는 것이 가장 좋습니다. JSON에는 큰 따옴표가 있어야합니다. 다른 답변은 대부분 "일관성"에 대한 조언을 제공합니다. 즉, 언어의 한 부분이 실제로 큰 따옴표를 강제 할 수 있으면 큰 따옴표를 일관되게 사용해야합니다.
Qaribou에서 조쉬

18
이는 거의 모든 다른 언어 (Java, C, C ++ 등)가 문자열에 큰 따옴표를 사용하고 문자에 작은 따옴표를 사용하는 여러 언어로 작업 할 때도 관련이 있습니다. 나는 전반적으로 같은 인용문을 사용하고 JS에 대해 큰 따옴표를 사용하는 것을 선호합니다. 수년간의 터치 타이핑으로 큰 따옴표를 바꾸는 여분의 키는 전적으로 관련이 없으며 코딩이 타이핑에 의해 제약을 받으면 타이핑을 올바르게 연습해야합니다.
Lawrence Dol

336

더 나은 해결책은 없습니다 . 그러나 때때로 큰 따옴표가 더 바람직 할 수 있다고 주장하고 싶습니다.

  • 신규 이민자들은 이미 그들의 언어에서 큰 따옴표를 알고있을 것입니다 . 영어에서는 큰 따옴표 "를 사용하여 인용 텍스트의 구절을 식별 해야 합니다. 우리가 작은 따옴표를 사용한다면 '독자는 그것을 따옴표 로 잘못 해석 할 수 있습니다. 로 둘러싸인 텍스트 구절의 다른 의미는 '구어체 의미를 나타냅니다. 기존 언어와 일관성을 유지하는 것이 합리적이므로 코드 학습 및 해석이 쉬워 질 수 있습니다.
  • 큰 따옴표 는 수축과 같이 아포스트로피를 피할 필요가 없습니다 . "I'm going to the mall"이스케이프 된 버전과 비교 하는 문자열 :을 고려하십시오 'I\'m going to the mall'.
  • 큰 따옴표는 다른 많은 언어의 문자열을 의미합니다 . Java 또는 C와 같은 새로운 언어를 배울 때는 항상 큰 따옴표가 사용됩니다. Ruby, PHP 및 Perl에서 작은 따옴표로 묶인 문자열은 백 슬래시 이스케이프를 나타내지 않으며 큰 따옴표는 지원합니다.

  • JSON 표기법은 큰 따옴표로 작성됩니다.

그럼에도 불구하고 다른 사람들이 언급했듯이 일관성을 유지하는 것이 가장 중요합니다.


영어에 대한 첫 번째 요점이 항상 사실은 아니며 지역 / 집 컨벤션에 따라 변경 될 수 있습니다. 인쇄물은 일반적으로 말에 작은 따옴표를 사용하고 인용 된 큰 텍스트 블록에는 다른 형식을 사용합니다. 귀하의 '구어체'의 의미는 강조를위한 인용의 유용한 정의가 아닙니다. 게다가 영어 사용자는 일반적으로 따옴표와 아포스트로피가 매우 열악합니다.
존 퍼거슨

2
@JohnFerguson은 그 이유만으로도 (아포스트로피와 인용구 사이의) 차별화를 위해 큰 따옴표를 사용하는 것이 바람직 할 수 있습니다.
user1429980

나는 실용주의에 관한 모든 것입니다. 내가 입력하거나 사용하는 100 개의 문자열 중 1 개에는 큰 따옴표가 있고 많은 수의 아포스트로피가 있기 때문에 이중을 사용합니다. 그러나 하루가 끝나면 1) 프로젝트의 새로운 개발자 인 경우 이미 프로젝트에서 사용중인 견적 유형을 사용하거나 2) 더 이해하기 쉬운 견적 유형을 사용해야합니다.
dudewad

예를 들어, 방금 입력 한 내용 (여러 개의 아포스트로피, 큰 따옴표는 없습니다.)
dudewad


118

사양의 7.8.4 절 은 리터럴 문자열 표기법을 설명합니다. 유일한 차이점은 DoubleStringCharacter는 "SourceCharacter이지만 큰 따옴표는 아닙니다"이고 SingleStringCharacter는 "SourceCharacter이지만 작은 따옴표는 아닙니다"입니다. 따라서 유일한 차이점은 다음과 같이 증명할 수 있습니다.

'A string that\'s single quoted'

"A string that's double quoted"

그래서 당신이하고 싶은 견적 이스케이프 양에 달려 있습니다. 큰 따옴표로 묶인 문자열의 큰 따옴표에도 동일하게 적용됩니다.


@Gareth : 사양에 대해서는 이야기하지 않았지만 가능한 성능 영향에 대해 이야기하고있었습니다. stackoverflow.com/questions/242813/…
Mathias Bynens

shift + '를 몇 번 눌러야 하는지를 보충하기 위해 코드에 아포스트로피를 충분히 넣으면 잘못되었습니다.
SgtPooki

1
무엇에 대한 "{\"name\": \"Peter\"}"'{"name": "Peter"}'? 분명히, 당신은 이것이 같은 차이라고 말할 수 있지만, 그것은 위의 예와는 다른 방식으로 결정에 확실히 영향을 줄 것입니다.
Trevor

@MathiasBynens-적어도 1 년 동안 관련이 없었으며 6 년 정도의 흥미로운 관찰입니다.
ArtOfWarfare

4
수직 작은 따옴표가 아닌 아포스트로피에 U + 2019를 사용해야합니다
jjg

95

작은 따옴표

큰 따옴표가 약간 더 이해 하기 쉽기 때문에 표준을 원 하지만 장면을 지배하기 때문에 작은 따옴표를 계속 사용합니다.

작은 따옴표 :

선호 사항 없음 :

큰 따옴표 :


7
Crockford는 이제 큰 따옴표를 선호합니다.
Adam Calvet Bohl

6
airbnb는 큰 따옴표를 선호합니다
Suraj Jain

15
@SurajJain 소스? 에어 비앤비Google 스타일 가이드는 여전히 단일 선호도를 나열합니다.
Alec Mev

5
@SurajJain 아, 이것들은 작은 따옴표를 허용하지 않는 JSON으로 작성된 코드 스타일 검사기 구성입니다. 그것들을 읽는 것은 다른 프로젝트에 의해 만들어진 선택을 비교하는 좋은 방법입니다.
Alec Mev

2
Google은 이제 작은 따옴표를 선호합니다
GabrielOshiro

57

그 차이가 순전히 문체라고 말하고 싶지만 실제로는 의심의 여지가 있습니다. 다음 예제를 고려하십시오.

/*
   Add trim() functionality to JavaScript...
    1. By extending the String prototype
    2. By creating a 'stand-alone' function
   This is just to demonstrate results are the same in both cases.
*/

// Extend the String prototype with a trim() method
String.prototype.trim = function() {
 return this.replace(/^\s+|\s+$/g, '');
};

// 'Stand-alone' trim() function
function trim(str) {
 return str.replace(/^\s+|\s+$/g, '');
};

document.writeln(String.prototype.trim);
document.writeln(trim);

Safari, Chrome, Opera 및 Internet Explorer (IE7 및 IE8에서 테스트)에서 다음을 반환합니다.

function () {
 return this.replace(/^\s+|\s+$/g, '');
}
function trim(str) {
 return str.replace(/^\s+|\s+$/g, '');
}

그러나 Firefox는 약간 다른 결과를 낳습니다.

function () {
    return this.replace(/^\s+|\s+$/g, "");
}
function trim(str) {
    return str.replace(/^\s+|\s+$/g, "");
}

작은 따옴표는 큰 따옴표로 대체되었습니다. (들여 쓰기 공간이 4 개의 공백으로 어떻게 바뀌 었는지 참고하십시오.) 이것은 적어도 하나의 브라우저가 마치 큰 따옴표를 사용하여 모든 것이 작성된 것처럼 JavaScript를 내부적으로 구문 분석한다는 인상을줍니다. 모든 것이 이미이 '표준'에 따라 작성된 경우 JavaScript가 JavaScript를 구문 분석하는 데 시간이 덜 걸립니다.

그건 그렇고, 작은 따옴표는 코드에서 훨씬 멋지게 보이기 때문에 나를 매우 슬픈 팬더로 만듭니다. 또한 다른 프로그래밍 언어에서는 일반적으로 큰 따옴표보다 사용 속도가 빠르므로 JavaScript에 동일하게 적용되는 경우에만 의미가 있습니다.

결론 : 이에 대해 더 많은 연구가 필요하다고 생각합니다.

편집 : 이것은 2003 년 Peter-Paul Koch의 테스트 결과 를 설명 할 수 있습니다 .

작은 따옴표는 것 같다 때로는 빠른 탐색기 윈도우에서 (내 시험의 약 3 분의 빠른 응답 시간을 표시했다)하지만, 전혀 경우 모질라 쇼 차이, 그것은 약간 빠른 따옴표를 처리합니다. Opera에서는 전혀 차이가 없었습니다.

2014 편집 : Firefox / Spidermonkey의 최신 버전은 더 이상이 작업을 수행하지 않습니다.


25
하나의 브라우저에서 한 가지 방법으로 수행하는 속도가 빠르며 다른 브라우저에서는 다른 방법으로 수행하는 속도가 약간 빠르다면, 우리가 취할 수있는 유일한 지침은 우리가 더 좋아하는 모든 것을해야한다는 것입니다. 사용자와 다른 사람을 도와 주면 차이의 정도는 눈에 띄지 않을 수 있습니다. "조기 최적화 ..."와 그 모든 것.
Andrew Hedges

2
내 의견이 더 건설적이지 않아서 죄송합니다. 브라우저가 구문의 내부 표현을 표시하도록 선택하는 방법은 구문 분석 방법과 거의 관련이 없으므로 한 유형의 따옴표를 다른 유형보다 선호하는 이유는 아닙니다. 반면에 브라우저에서 작은 따옴표와 큰 따옴표의 구문 분석 시간을 비교하는 성능 데이터는 더 매력적입니다.
Chris Calo

1
이것은 굉장한 대답입니다. 나머지는 '그들과 똑같습니다.'라는 말을 듣습니다 . 당신은 "다른 프로그래밍 언어에서는 보통 두 배보다 사용하기가 더 빠릅니다." 따옴표 " , 어떤 언어를 물어봐도 될까요? Java 및 C #과 같은 일반 언어를 사용했지만 작은 따옴표로 문자열 리터럴을 허용하는 JS 이외의 다른 언어는 보지 못했습니다. 작은 따옴표는 일반적으로 문자 상수에만 사용됩니다 (한 문자 만 허용됨).
ADTC

3
AFAIK는 Firefox 17에서 수정되었습니다. Firefox는 수행 할 때 디 컴파일을 수행 .toString했지만 이제는 원본을 반환합니다. 현대 파이어 폭스에는이 문제가 없습니다.
Benjamin Gruenbaum

3
속도 차이에 대해 모른다. 그러나 "이것은 적어도 하나의 브라우저가 마치 모든 것이 큰 따옴표를 사용하여 작성된 것처럼 JavaScript를 내부적으로 구문 분석한다는 인상을줍니다." 말도 안됩니다. 마치 큰 따옴표로 쓴 것처럼 해석되지 않습니다. 즉, 내부 표현 (따옴표가 아닌 문자열 만 저장)을 사람이 읽을 수있는 버전으로 바꾸어 한 세트의 따옴표를 사용합니다. 어쨌든, 이것은 Benjamin의 의견에 따라 변경된 것으로 보입니다.
subsub

32

인라인 JavaScript를 사용하는 경우 (아마 "나쁜"일이지만 토론을 피하는 경우) single 따옴표는 문자열 리터럴에 대한 유일한 옵션입니다.

예를 들어, 이것은 잘 작동합니다.

<a onclick="alert('hi');">hi</a>

그러나 내가 알고있는 탈출 방법을 통해 "hi"를 큰 따옴표로 묶을 수는 없습니다. 에도 &quot;(당신은 HTML의 속성 값에 따옴표를 탈출하고 이후) 파이어 폭스에서 저를 위해 일하고 나의 추측하지 않습니다되었을 것이다. \"이 시점에서 JavaScript가 아닌 HTML을 탈출하기 때문에 작동하지 않습니다.

따라서 게임 이름이 일관성 있고 앱의 일부에서 인라인 JavaScript를 사용하려는 경우 작은 따옴표가 승자라고 생각합니다. 내가 틀렸다면 누군가 나를 수정하십시오.


8
틀림없이 나쁜 일에 동의했다. 그러나 그것이 이루어져야한다면 URL 스타일 인코딩이 사용될 수 있다고 확신한다. 예를 들어 <a onclick="alert(%22hi%22);">hi</a>메모리에서이 속성은 href 속성에 있었을 수도 있지만<a href="javascript:alert(%22hi%22);">hi</a>
Graza

2
@PhiLho 당신이 옳습니다 ... 사람들이 전통적으로 큰 따옴표로 묶인 HTML 속성을 쓰고 있다고 가정하고 있었고 (1) 모든 것을 작은 따옴표로 도매로 변환하거나 (2) 믹싱 앤 매치를하지 않을 것이라고 가정했습니다. 작은 따옴표와 큰 따옴표 속성. 그러나 그렇습니다, 당신은 맞습니다
Tom Lianza

4
@Tom Lianza는 반드시 alert(&quot;hi&quot;)유효한 JavaScript가 아닙니다. 그러나 속성 값은 인코딩됩니다. w3.org/TR/html4/intro/sgmltut.html#didx-attribute
Robert

4
@Robert와 동의했습니다. &quot;HTML 속성 내에서 큰 따옴표를 이스케이프 처리하는 올바른 방법입니다. Firefox에서는 제대로 작동합니다. @Denilson, XML (및 XHTML)은 작은 따옴표와 큰 따옴표를 모두 허용합니다. AttValueXML 스펙 w3.org/TR/REC-xml/#d0e888 의 리터럴을 참조하십시오 .
Chris Calo

1
@Pacener : 왜냐하면, 어, 틀리지 않기 때문입니다. 큰 따옴표 사이에 속성을 넣는 규칙이 HTML에 있습니다.
Konrad Borowski

30

기술적으로 차이는 없으며 스타일과 관습의 문제입니다.

Douglas Crockford는 내부 문자열에 작은 따옴표를 사용하고 외부에 큰 따옴표를 사용하는 것이 좋습니다 (외부 적으로는 메시지 또는 경고와 같은 응용 프로그램 사용자에게 표시되는 것을 의미합니다).

나는 개인적으로 그것을 따릅니다.

업데이트 : Crockford 씨가 마음을 바꿨고 이제는 큰 따옴표를 사용하는 것이 좋습니다. :)


13
더글러스 크록 포드 vs JQuery. 독을 선택하십시오.
에릭

이에 대한 Crockford의 추론은 무엇입니까?
BadHorsie

1
이것이 내가 따르는 관습입니다. 더 개인적인 취향입니다. jQuery 선택기 및 / 또는 getElementById ( 'id')와 같은 내부 항목에 작은 따옴표로 묶인 문자열을 사용하는 것이 좋습니다. 작은 따옴표로 표시되는 방식이 마음에 듭니다. 그러나 텍스트에 내부 따옴표가 포함될 수 있으므로 외부 텍스트에 큰 따옴표로 전환하십시오. 또한 오류를 찾으려고 할 때 외부 문자열과 내부 문자열을 쉽게 구별하고 구별 할 수 있습니다.
adimauro

3
2016 년 4 월 현재 Douglas Crockford 는 실제로 많은 개발자가 내부 및 외부 이분법을 사용하기 어렵다는 점을 고려할 때 큰 따옴표 만 사용 하도록 권장 합니다.
Thunderforge

27

엄밀히 말하면 의미에는 차이가 없습니다. 선택은 편의성에 달려 있습니다.

선택에 영향을 줄 수있는 몇 가지 요소는 다음과 같습니다.

  • 하우스 스타일 : 일부 개발자 그룹은 이미 하나의 규칙을 사용합니다.
  • 클라이언트 측 요구 사항 : 문자열 내에서 따옴표를 사용 하시겠습니까? (Ady의 답변 참조).
  • 서버 측 언어 : VB.Net 사용자는 자바 스크립트에 작은 따옴표를 사용하여 스크립트를 서버 측으로 작성할 수 있습니다 (VB.Net은 문자열에 큰 따옴표를 사용하므로 자바 스크립트 문자열을 쉽게 구별 할 수 있음) 작은 따옴표를 사용하는 경우).
  • 라이브러리 코드 : 특정 스타일을 사용하는 라이브러리를 사용하는 경우 동일한 스타일을 직접 사용하는 것이 좋습니다.
  • 개인 취향 : 하나 이상의 스타일이 더 좋아 보인다고 생각할 수 있습니다.

사실 '이 아니며, 00100111이진 상태 "이지만 00100010이진 상태입니다. 따라서 큰 따옴표는 작은 따옴표보다 저장하는 데 절반의 힘이 필요합니다. 그것이 바로 차이점입니다.

19

참조가 무엇을하는지 보자.

jquery.js 내부에서 모든 문자열은 큰 따옴표로 묶습니다.

이제부터는 큰 따옴표로 묶은 문자열을 사용하겠습니다. (나는 싱글을 사용하고 있었다!)


11
왜이 투표가 거부 되었습니까? 이것은 스타일의 문제이며 최고의 스타일은 일관되고 자신보다 먼저 온 사람들을 따르는 것입니다.
에릭

2
+1 jQuery API 문서 도 마찬가지입니다. 이것이 내가 큰 따옴표로 정한 유일한 이유였습니다. 개인적으로, 나는 그것이 "개인 취향에 귀착된다"는 대답은 약간 결함이 있다고 생각합니다. 널리 사용되는 관습을 찾아 내고 준수하는 것이 가장 좋습니다. 그리고 jQuery에서 예제를 직접 또는 간접적으로 복사하여 붙여 넣을 수 있기 때문에 매번 따옴표를 바꾸지 않아도됩니다.
Steve Chambers

2
아마도 jQuery는 사람들보다 먼저 사람들을 따르지 못했을 것입니다 (또는 대부분의 다른 전문가처럼 신경 쓰지 않았습니다). ;)
James Wilkins 2016 년

14

사용하는 내용의 일관성을 유지하십시오. 그러나 편안함 수준을 낮추지 마십시오.

"This is my string."; // :-|
"I'm invincible."; // comfortable :)
'You can\'t beat me.'; // uncomfortable :(
'Oh! Yes. I can "beat" you.'; // comfortable :)
"Do you really think, you can \"beat\" me?"; // uncomfortable :(
"You're my guest. I can \"beat\" you."; // sometimes, you've to :P
'You\'re my guest too. I can "beat" you too.'; // sometimes, you've to :P

ES6 업데이트

사용 템플릿 리터럴 구문을 .

`Be "my" guest. You're in complete freedom.`; // most comfort :D

13

그것은 주로 스타일과 선호의 문제입니다. 다른 답변에는 다소 흥미롭고 유용한 기술 탐구가 있으므로 아마도 내가 추가 할 수있는 유일한 것은 약간의 세상적인 조언을 제공하는 것입니다.

  • 경우 당신은 회사 나 팀에 코딩하고, 그 다음 은 아마 "하우스 스타일"을 따라하는 것은 좋은 아이디어입니다.

  • 혼자서 몇 가지 부수적 인 프로젝트를 해킹하고 있다면 커뮤니티의 저명한 지도자 몇 명 살펴보십시오. 예를 들어 Node.js를 시작한다고 가정 해 봅시다. underscore.js와 같은 핵심 모듈을 살펴 보거나 어떤 규칙을 사용하는지 파악하고 준수하십시오.

  • 두 규칙을 모두 동일하게 사용하는 경우 개인 연기하십시오
    선호.

  • 경우 당신은 개인적인 취향이없는 다음 동전을 뒤집습니다.

  • 경우 당신이 동전을하지 않아도, 다음 맥주 나에)


13

나는 분명한 것을 추가하지 않기를 희망하지만 장고아약스 와 씨름했다 이것에 대해 및 JSON 있습니다.

HTML 코드에서 큰 따옴표를 사용한다고 가정하면 일반적으로 JavaScript와 같이 작은 따옴표를 사용하는 것이 좋습니다.

따라서 @ady에 동의하지만 약간의주의가 필요합니다.

내 결론은 : JavaScript에서는 중요하지 않지만 HTML이나 HTML에 포함시키는 즉시 문제가 발생합니다. 실제로 이스케이프, 읽기, 문자열 전달 내용을 알고 있어야합니다.

간단한 사례는 다음과 같습니다.

tbox.innerHTML = tbox.innerHTML + '<div class="thisbox_des" style="width:210px;" onmouseout="clear()"><a href="https://stackoverflow.com/this/thislist/'
                   + myThis[i].pk +'"><img src="/site_media/'
                   + myThis[i].fields.thumbnail +'" height="80" width="80" style="float:left;" onmouseover="showThis('
                   + myThis[i].fields.left +','
                   + myThis[i].fields.right +',\''
                   + myThis[i].fields.title +'\')"></a><p style="float:left;width:130px;height:80px;"><b>'
                   + myThis[i].fields.title +'</b> '
                   + myThis[i].fields.description +'</p></div>'

showThis의 세 번째 필드에서 \ '를 찾을 수 있습니다.

큰 따옴표가 작동하지 않았습니다!

이유는 분명하지만 왜 우리가 작은 따옴표를 고수해야하는지도 분명합니다.

이 사례는 매우 간단한 HTML 임베딩이며 오류는 '큰 따옴표로 묶인'JavaScript 코드에서 간단한 복사 / 붙여 넣기로 생성되었습니다.

따라서 질문에 대답하려면 다음을 수행하십시오.

HTML 내에서 작은 따옴표를 사용하십시오. 몇 가지 디버그 문제를 저장할 수 있습니다 ...


1
ES6 문자열 보간 (백틱)과 비슷한 문제가 발생했습니다. 내 빌드 시스템은 큰 따옴표로 묶은 문자열로 컴파일했습니다. 작은 따옴표로 작업 한 Auth 헤더가 손상되었습니다!
Jay

12

이것이 오늘날의 세계와 관련이 있는지 확실하지 않지만 제어 문자를 처리 해야하는 콘텐츠에 사용 된 큰 따옴표와 그렇지 않은 문자열에 대한 작은 따옴표를 사용했습니다.

컴파일러는 작은 따옴표로 묶은 문자열을 그대로 그대로두고 큰 따옴표로 묶은 문자열에서 문자열 조작을 실행합니다. 이는 '좋은'개발자가 제어 문자를 포함하지 않는 문자열 ( \n또는 \0작은 따옴표로 처리되지 않음)에 작은 따옴표를 사용하고 문자열을 구문 분석해야 할 때 큰 따옴표를 사용하도록 선택했습니다. 문자열 처리).


14
일이 한 가지 방식으로 만 수행 된 것이 아니라 이제는 다른 방식으로 수행되는 것이 아닙니다. 다른 언어는 따옴표를 다르게 처리하며 일부는 설명대로 작동합니다. 그러나 이것은 JavaScript 질문입니다. 작은 따옴표와 큰 따옴표는 JavaScript에서 동일하게 취급됩니다 (다른 유형의 따옴표를 이스케이프하지 않고 문자열에 사용할 수는 제외). 제어 문자 또는 문자열 보간을 허용하는 큰 따옴표에 대해서는 의문의 여지가 없습니다. JavaScript는 그런 식으로 작동하지 않습니다. 제어 문자 및 이스케이프 시퀀스는 사용하는 따옴표 유형과 동일하게 작동합니다.
Michael Geary

전 Perl 프로그래머로서 이것이 JS와 관련이 없다는 것을 알고 있지만 계속 생각하고 있습니다.
zkent

12

jshint를 사용하는 경우 당신이 따옴표 문자열을 사용하는 경우, 그것은 오류가 발생합니다.

나는 AngularJS의 Yeoman scafflholding을 통해 그것을 사용했지만 어쩌면 이것을 구성하는 방법이있을 수 있습니다.

그건 그렇고, HTML을 JavaScript로 처리 할 때 작은 따옴표를 사용하는 것이 더 쉽습니다.

var foo = '<div class="cool-stuff">Cool content</div>';

그리고 적어도 JSON은 큰 따옴표를 사용하여 문자열을 표현합니다.

귀하의 질문에 대답 할 수있는 사소한 방법은 없습니다


jshint 구현이 변경 되었습니까? 데모 웹 사이트는 경고 / 오류를 발생시키지 않고 둘 중 하나를 수락하는 것으로 보이므로 jshint를 사용하도록 제한하는 옵션을 찾을 수 없습니다. 아마도이 대답은 오래되었거나 부정확합니까?
Lea Hayes

jshint가 큰 따옴표로 묶인 문자열에 대해 오류를 발생 시키면 심각하게 손상되었습니다. JavaScript 표준은 무엇이 정확하지 않은지를 정의합니다.
Mecki

10

성능에 대해 말하면 따옴표는 결코 병목 현상이되지 않지만 성능은 두 경우 모두 동일합니다.

코딩 속도에 대해 이야기 '하면서 문자열을 구분하는 데 사용 하는 경우 "따옴표 를 이스케이프해야 합니다. 다음과 "같이 문자열 내부에서 사용해야 할 가능성이 높습니다 .

//JSON Objects:
var jsonObject = '{"foo":"bar"}';
//HTML attributes:
document.getElementById("foobar").innerHTML = '<input type="text">';

그런 다음 '문자열을 구분 하는 데 사용 하기 때문에 더 적은 문자를 이스케이프해야합니다.


10

작은 따옴표를 사용하는 한 가지 (사실 한) 이유는 작은 따옴표를 입력하는 데 Shift 키를 누르지 않아도되기 때문입니다. (평균 문자열에는 이스케이프가 필요하지 않다고 가정합니다. 이는 합리적인 가정입니다.) 이제 매일 200 줄의 코드를 코딩한다고 가정하겠습니다. 어쩌면 그 200 줄에 30 따옴표가 있습니다. 큰 따옴표를 입력하면 작은 따옴표를 입력하는 것보다 0.1 초 더 많은 시간이 걸릴 수 있습니다 (Shift 키를 눌러야하기 때문). 그런 다음 어느 날이든 3 초를 낭비합니다. 40 년 동안 일년에 200 일 동안 이런 식으로 코딩한다면, 나는 6.7 시간의 내 인생을 낭비했습니다. 생각할 거리.


1
나는 여기에 영어 키보드 레이아웃 만 언급하고 있다고 생각합니다 ... 독일어가 있는데 둘 다 교대해야합니다. 어쨌든 Shift 키를 누르면 프로세스에 시간이 추가되는 이유를 알 수 없습니다. 왼손으로 Shift 키를 누르고 오른쪽으로 따옴표 키를 누릅니다. 그것은 동시에 발생합니다. 나에게는 아무런 차이가 없습니다.
codewandler

1
@codewandler 당신이 "키에 병렬을 눌러 경우에도 시프트 키를 눌러해야하는 비용은 여전히있다 멀리 기본 위치에서 손가락을 이동하는 당신을 강제로 예를 들어, 당신에게있는 거 입력을 가정합니다.. var description = "This is a \"quick\" test";에 영어 키보드의 경우 핑키 손가락은 A 키에서 Q 키로 이동하는 대신 왼쪽 Shift 키에서 맨 윗줄의 Q 키로 이동해야합니다. . 나는 키가 독일어 키보드에 있는지 어디 모르겠지만, 난 확실히 유사한 예를있다.
존 Kurlak

2
@codewandler 또한, 병렬로 할 수 있더라도 shift를 입력해야한다고하더라도 왼쪽 핑키 손가락으로 "입력 한 내용에 관계없이"다음에 다음 문자를 입력 할 수 없습니다.
John Kurlak

1
"시간 낭비"아이디어는 약간 어리석은 편이지만 인체 공학적 부담이 적은 아이디어 (특히, 카펠 터널 증후군 시대 등)는 특히 중요하지 않은 경우에 큰 도움이됩니다. 매일 1,000 줄이 넘는 코드를 사용하면 매일 수백 번의 새끼 손가락을 구할 수 있습니다.
Beejor

9

장단점 검토

작은 따옴표에 찬성

  • 시각적 혼란이 줄어 듭니다.
  • HTML 생성 : HTML 속성은 일반적으로 큰 따옴표로 구분됩니다.

elem.innerHTML = '<a href="' + url + '">Hello</a>';
그러나 작은 따옴표는 HTML과 마찬가지로 합법적입니다.

elem.innerHTML = "<a href='" + url + "'>Hello</a>";

또한 인라인 HTML은 일반적으로 안티 패턴입니다. 템플릿을 선호하십시오.

  • JSON 생성 : JSON에는 큰 따옴표 만 사용할 수 있습니다.

myJson = '{ "hello world": true }';

다시 말하지만, 이런 식으로 JSON을 구성 할 필요는 없습니다. JSON.stringify ()로 충분합니다. 그렇지 않은 경우 템플릿을 사용하십시오.

큰 따옴표에 찬성

  • 색상 코딩이 없으면 복식을 쉽게 찾을 수 있습니다. 콘솔 로그 나 일종의 뷰 소스 설정과 같습니다.
  • 다른 언어와의 유사성 : 쉘 프로그래밍 (Bash 등)에는 작은 따옴표로 묶인 문자열 리터럴이 있지만 이스케이프는 내부에서 해석되지 않습니다. C와 Java는 문자열에 큰 따옴표를 사용하고 문자에 작은 따옴표를 사용합니다.
  • 코드가 유효한 JSON이 되려면 큰 따옴표를 사용해야합니다.

둘 다 찬성

JavaScript에서 둘 사이에는 차이가 없습니다. 따라서 현재 편리한 기능을 사용할 수 있습니다. 예를 들어 다음 문자열 리터럴은 모두 동일한 문자열을 생성합니다.

    "He said: \"Let's go!\""
    'He said: "Let\'s go!"'
    "He said: \"Let\'s go!\""
    'He said: \"Let\'s go!\"'

내부 문자열은 작은 따옴표, 외부 문자열은 큰 따옴표. 이를 통해 사용자에게 표시되거나 디스크에 쓰여지는 문자열과 내부 상수를 구별 할 수 있습니다. 분명히 후자를 코드에 넣지 말아야하지만 항상 그렇게 할 수는 없습니다.


8

큰 따옴표에서 작은 따옴표로 이동하는 이유로 고려해야 할 또 하나의 사항은 서버 측 스크립트의 인기가 증가한다는 것입니다. PHP를 사용할 때 PHP에서 문자열과 변수를 사용하여 변수를 전달하고 자바 스크립트 함수를 구문 분석 할 수 있습니다.

문자열을 작성하고 PHP에 큰 따옴표를 사용하면 작은 따옴표를 이스케이프 처리하지 않아도되고 PHP는 자동으로 변수 값을 검색합니다.

예 : 서버에서 변수를 사용하여 자바 스크립트 함수를 실행해야합니다.

public static function redirectPage( $pageLocation )
{
    echo "<script type='text/javascript'>window.location = '$pageLocation';</script>";
}

이렇게하면 문자열 조인을 처리해야하는 번거 로움이 줄어들고 PHP에서 효과적으로 자바 스크립트를 호출 할 수 있습니다. 이것은 하나의 예일 뿐이지 만, 프로그래머가 자바 스크립트에서 작은 따옴표로 기본 설정하는 몇 가지 이유 중 하나 일 수 있습니다.

PHP 문서에서 인용 : "큰 따옴표로 묶인 문자열의 가장 중요한 기능은 변수 이름이 확장된다는 사실입니다. 자세한 내용은 문자열 구문 분석을 참조하십시오."


+1, C #의 큰 따옴표가 자바 스크립트의 작은 따옴표를 방해하지 않도록 MVC.Net 프로젝트 에서이 작업을 수행합니다.
DCShannon

3
PHP 클래스 메소드에서 페이지에 JavaScript를 작성하면 더 큰 문제가 있다고 생각합니다.
BadHorsie

6

성능 차이가 있다고 주장하는 사람들이 있습니다 : old mailing list thread . 그러나 나는 그들 중 어떤 것도 확인할 수 없었습니다.

가장 중요한 것은 문자열 내에서 어떤 종류의 따옴표 (더블 또는 싱글)를 사용하는지 보는 것입니다. 탈출 횟수를 줄이는 데 도움이됩니다. 예를 들어 문자열 내에서 html을 사용하는 경우 작은 따옴표를 사용하는 것이 더 쉬워서 속성 주위에 큰 따옴표를 모두 이스케이프하지 않아도됩니다.


속성은 물론 :) 작은 따옴표로 둘러싸인 될 수 있지만
미르 Zekić에게

귀하의 권리, xml 및 xhtml은 속성을 둘러싼 큰 따옴표를 처방한다고 생각했지만 작은 따옴표는 허용됩니다.
Michiel

6

작은 따옴표를 사용할 수 없을 때 큰 따옴표를 사용하고 그 반대도 마찬가지입니다.

"'" + singleQuotedValue + "'"
'"' + doubleQuotedValue + '"'

대신에:

'\'' + singleQuotedValue + '\''
"\"" + doubleQuotedValue + "\""

무엇 에서야 "O'rea 등 모두 작은 따옴표와 큰 따옴표를 포함하는 문자열에 대한
sudhAnsu63

6

JavaScript에서 작은 따옴표와 큰 따옴표는 차이가 없습니다.

사양이 중요합니다 :

어쩌면 성능 차이가있을 수는 있지만 절대적으로 최소이며 브라우저 구현에 따라 매일 바뀔 수 있습니다. JavaScript 응용 프로그램의 길이가 수십만 개가 아니라면 추가 논의는 쓸모가 없습니다.

다음과 같은 경우 벤치 마크와 같습니다.

a=b;

보다 빠르다

a = b;

(추가 공간)

오늘날 특정 브라우저 및 플랫폼 등


2
공백이 없으면 빠릅니다. 문자열에서 구문 분석 할 문자가 적습니다. : p
pilavdzice

6

CoffeeScript를 사용할 때 큰 따옴표를 사용합니다. 나는 당신이 하나를 골라 내 밀어야한다는 것에 동의합니다. CoffeeScript는 큰 따옴표를 사용할 때 보간을 제공합니다.

"This is my #{name}"

ES6은 템플릿 문자열에 백틱 (`)을 사용하고 있습니다. 어떤 좋은 이유가 있을지 모르지만 코딩 할 때 보간 기능을 얻기 위해 문자열 리터럴 문자를 따옴표 나 큰 따옴표에서 백 틱으로 변경하는 것이 번거로울 수 있습니다. CoffeeScript는 완벽하지는 않지만 모든 곳에서 동일한 문자열 리터럴 문자 (큰 따옴표)를 사용하며 항상 보간 할 수있는 기능이 좋습니다.

`This is my ${name}`

나에게 백틱은이 콘테스트에서 확실한 승자입니다. (거의) 일반적인 텍스트 문자열 안에는 존재하지 않으며 var 보간
Simone Poggi

5

JavaScript와 C # 사이에서 앞뒤로 건너 뛰는 경우 큰 따옴표 인 일반적인 규칙을 익히는 것이 가장 좋습니다.


5

나는 약 20 번 다음을 실행했습니다. 그리고 큰 따옴표는 약 20 % 빠릅니다.

재미있는 부분은 2 부와 1 부를 바꾸면 작은 따옴표가 약 20 % 빠릅니다.

//Part1
var r='';
var iTime3 = new Date().valueOf();
for(var j=0; j<1000000; j++) {
    r+='a';
}
var iTime4 = new Date().valueOf();
alert('With single quote : ' + (iTime4 - iTime3));  

//Part 2                
var s="";
var iTime1 = new Date().valueOf();
for(var i=0; i<1000000; i++) {
    s += "a";
}
var iTime2 = new Date().valueOf();
alert('With double quote: ' + (iTime2 - iTime1));

31
달리 말하면, 최신 코드가 가장 빨리 실행된다는 것을 알았습니다. 이는 마이크로 벤치 마크를 수행 할 때 발생하는 문제입니다. 코드가 실행될 때 최적화하는 JS 엔진을 고려해야합니다. (JIT 작동 방식으로 인해 Java를 벤치마킹 할 때도 이와 동일한 효과가 나타납니다.)
David Phillips

4
첫 번째 새로운 날짜가 느리다. var dummy_date = new Date()시작 부분에 추가
Lauri

1
여기서 미세 최적화 수준은 너무 어리석기 때문에 작은 따옴표를 입력하는 것이 더 빠르므로 개발 속도가 빠릅니다.
Beejor

4

차이점은 엄격히 없기 때문에 대부분 이스케이프 횟수를 낮게 유지하는 것은 맛과 문자열에있는 것 (또는 JS 코드 자체가 문자열에있는 경우)의 문제입니다.

속도 차이 범례는 두 인용 부호가 다른 동작을하는 PHP 세계에서 나올 수 있습니다.


그리고 루비, 나는 덧붙일지도 모른다. 파이썬은 JavaScript와 같은 동작을합니다 : 작은 따옴표 나 큰 따옴표 사이에는 차이가 없습니다.
Damir Zekić

4

더 빠르거나 장점이 있다고 말하는 모든 답변을 읽은 후에 Google 클로저 컴파일러가 작은 따옴표를 큰 따옴표로 변환 하기 때문에 큰 따옴표가 더 좋거나 더 빠를 것이라고 말합니다 .


왜 그렇게하는지 아십니까?
ma11hew28

모르겠어요 어쩌면 코딩 규칙 일 수도 있고 특별한 것은 아닙니다.
Mohsen

4

이제 2020 년이되었으므로 Javascript의 세 번째 옵션 인 모든 것을위한 단일 백틱을 고려해야합니다.

작은 따옴표 나 큰 따옴표 대신 어디에서나 사용할 수 있습니다.

그것은 당신이 모든 일을 할 수 있습니다!

  1. 그 안에 작은 따옴표를 넣으십시오 : `좋습니다!`
  2. 그 안에 큰 따옴표를 넣습니다. “정말로 훌륭합니다!”
  3. 문자열 보간법을 사용하십시오 : `위보다 "$ {better}"입니다!
  4. 여러 줄을 허용합니다 : `

    만든다

    자바 스크립트

    보다 나은!

    `

https://medium.com/javascript-in-plain-english/are-backticks-slower-than-other-strings-in-javascript-ce4abf9b9fa :


3

JS 소스가 다음과 같은 경우 :

elem.innerHTML="<img src='smily' alt='It\'s a Smily' style='width:50px'>";

HTML 소스는 다음과 같습니다.

<img src="smiley" alt="It's a Smiley" style="width:50px">

또는 HTML5

<img src=smiley alt="It's a Smiley" style=width:50px>

JS는 다음과 같은 배열을 허용합니다.

var arr=['this','that'];

그러나 당신이 그것을 문자열 화하면, 그것은 비슷한 이유가 될 것입니다 :

JSON=["this","that"]

시간이 좀 걸릴 것 같습니다.


3

2 센트 만 추가하기 : 몇 년 전에 JS와 PHP를 모두 사용하면서 작은 따옴표를 사용하는 것에 익숙해 져서 이스케이프 문자 ( '\')를 이스케이프 처리하지 않고도 입력 할 수 있습니다. 파일 경로 등을 사용하여 원시 문자열을 입력 할 때 주로 사용했습니다 ( http://en.wikipedia.org/wiki/String_literal#Raw_strings ).

어쨌든, 나의 관습은 if (typeof s == 'string') ...(이스케이프 문자는 절대 사용되지 않는) 식별자 유형 원시 문자열에 작은 따옴표를 사용 하고 "Hey, What 's up?"과 같은 텍스트에 큰 따옴표를 사용하게되었습니다 . 또한 주석의 작은 따옴표를 표기 규칙으로 사용하여 식별자 이름을 표시합니다. 이것은 단지 경험 법칙이며 HTML 문자열을 입력 할 때와 같이 필요할 때만 분리 '<a href="#"> like so <a>'합니다 (여기서 인용 부호를 바꿀 수도 있음). 또한 JSON의 경우 큰 따옴표가 이름에 사용되지만 개인적으로 는 따옴표 사이의 텍스트에 이스케이프가 필요 하지 않을 때 작은 따옴표를 선호합니다 document.createElement('div').

결론적으로, 일부 사람들이 언급했듯이, 컨벤션을 고르고이를 고수하고 필요할 때만 이탈합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.