Когда использовать двойные или одинарные кавычки в JavaScript?
console.log("double"); против console.log('single');
Я вижу все больше и больше библиотек JavaScript, использующих одинарные кавычки при обработке строк. Каковы причины использовать один над другим? Я думал, что они в значительной степени взаимозаменяемы.
46 ответов
Наиболее вероятной причиной использования одинарного или двойного в разных библиотеках является предпочтение программиста и / или согласованность 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 in a string`);
Шаблонные литералы предлагают чистый синтаксис для: интерполяции переменных, многострочных строк и многого другого.
Если вы имеете дело с JSON, следует отметить, что строго говоря, строки JSON должны быть заключены в двойные кавычки. Конечно, многие библиотеки также поддерживают одинарные кавычки, но у меня были большие проблемы в одном из моих проектов, прежде чем я понял, что одиночные кавычки строки на самом деле не соответствуют стандартам JSON.
Нет лучшего решения; Тем не менее, я хотел бы утверждать, что двойные кавычки могут быть более желательными в разы:
- Новички уже знакомы с двойными кавычками на своем языке. В английском мы должны использовать двойные кавычки
"определить отрывок цитируемого текста. Если бы мы использовали одну цитату'Читатель может неверно истолковать это как сокращение. Другое значение отрывка текста в окружении'указывает на "разговорный" смысл. Имеет смысл оставаться в соответствии с ранее существовавшими языками, и это может облегчить изучение и интерпретацию кода. - Двойные кавычки устраняют необходимость избегать апострофов (как в сокращениях). Рассмотрим строку:
"I'm going to the mall", в отличие от другой версии:'I\'m going to the mall', Двойные кавычки означают строку во многих других языках. Когда вы изучаете новый язык, такой как Java или C, всегда используются двойные кавычки. В Ruby, PHP и Perl строки в одинарных кавычках не предполагают экранирования обратной косой черты, в то время как двойные кавычки поддерживают их.
Запись в формате JSON пишется в двойных кавычках.
Тем не менее, как утверждали другие, очень важно оставаться последовательным.
Единственная разница проявляется в следующем:
'A string that\'s single quoted'
"A string that's double quoted"
Таким образом, это зависит только от того, сколько вы хотите сделать, избегая цитаты. Очевидно, то же самое относится к двойным кавычкам в двойных кавычках.
Одинарные кавычки
Хотелось бы, чтобы двойные кавычки были стандартом, потому что они имеют немного больше смысла, но я продолжаю использовать одинарные кавычки, потому что они доминируют на сцене.
Одинарные кавычки:
- Airbnb
- хрюкать
- глоток
- узел
- нпм (хотя и не определено в руководстве автора)
- Викимедиа
- WordPress
- Яндексу
Нет предпочтений:
Двойные кавычки:
Я бы хотел сказать, что разница чисто стилистическая, но у меня действительно есть сомнения. Рассмотрим следующий пример:
/*
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, "");
}
Одиночные кавычки были заменены на двойные. (Также обратите внимание, как пространство отступа было заменено четырьмя пробелами.) Создается впечатление, что по крайней мере один браузер внутренне анализирует JavaScript, как будто все написано с использованием двойных кавычек. Можно подумать, что Firefox занимает меньше времени для разбора JavaScript, если все уже написано в соответствии с этим "стандартом".
Что, кстати, делает меня очень грустной пандой, так как я думаю, что одиночные кавычки выглядят намного лучше в коде. Кроме того, в других языках программирования они обычно используются быстрее, чем двойные кавычки, поэтому это будет иметь смысл только в том случае, если это применимо к JavaScript.
Вывод: я думаю, что нам нужно больше исследовать это.
Изменить: Это может объяснить результаты теста Петра-Пола Коха еще в 2003 году.
Кажется, что одинарные кавычки иногда бывают быстрее в Windows Explorer (примерно 1/3 моих тестов показывали более быстрое время отклика), но если Mozilla вообще показывает разницу, он обрабатывает двойные кавычки немного быстрее. Я не обнаружил никакой разницы в Opera.
Edit 2014: современные версии Firefox/Spidermonkey больше не делают этого.
Если вы делаете встроенный JavaScript (возможно, "плохой", но избегаете этого обсуждения), то, я полагаю, одиночные кавычки - ваш единственный вариант для строковых литералов.
например, это прекрасно работает:
<a onclick="alert('hi');">hi</a>
Но вы не можете обернуть "привет" в двойные кавычки, используя любой метод экранирования, который я знаю. Четное " это было бы моим лучшим предположением (так как вы избегаете кавычек в значении атрибута HTML) не работает для меня в Firefox. \" тоже не сработает, потому что на этом этапе вы используете HTML, а не JavaScript.
Итак, если название игры - последовательность, и вы собираетесь использовать встроенный JavaScript в некоторых частях вашего приложения, я думаю, что одинарные кавычки - победитель. Кто-то, пожалуйста, поправьте меня, если я ошибаюсь.
Технически нет никакой разницы, это только вопрос стиля и соглашения.
Дуглас Крокфорд рекомендует использовать одинарные кавычки для внутренних строк и двойные кавычки для внешних (под внешними мы подразумеваем те, которые должны отображаться пользователю приложения, например сообщения или оповещения).
Я лично следую за этим.
ОБНОВЛЕНИЕ: кажется, что г-н Крокфорд передумал и теперь рекомендует использовать двойные кавычки:)
Строго говоря, нет никакой разницы в значении; так что выбор сводится к удобству.
Вот несколько факторов, которые могут повлиять на ваш выбор:
- Домашний стиль: некоторые группы разработчиков уже используют одно соглашение или другое.
- Требования на стороне клиента: Будете ли вы использовать кавычки в строках? (См. Ответ Ади).
- Серверный язык: люди VB.Net могут выбрать использование одинарных кавычек для java-скрипта, чтобы скрипты могли быть построены на стороне сервера (VB.Net использует двойные кавычки для строк, поэтому строки java-скрипта легко различить если они используют одинарные кавычки).
- Код библиотеки: если вы используете библиотеку, которая использует определенный стиль, вы можете рассмотреть возможность использования того же стиля самостоятельно.
- Личные предпочтения: Вы могли бы, чтобы тот или иной стиль выглядел лучше.
Давайте посмотрим, что делает ссылка.
Внутри jquery.js каждая строка заключена в двойные кавычки.
Итак, теперь я буду использовать строки в двойных кавычках. (Я использовал сингл!)
Просто сохраняйте последовательность в том, что вы используете. Но не подводите свой уровень комфорта.
"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
Я надеюсь, что я не добавляю что-то очевидное, но я боролся с Django, Ajax и JSON по этому вопросу.
Предполагая, что в вашем HTML-коде вы используете двойные кавычки, как обычно должно быть, я настоятельно рекомендую использовать одинарные кавычки для остальных в JavaScript.
Так что я согласен с @ady, но с некоторой осторожностью.
Суть в том, что в JavaScript, вероятно, это не имеет значения, но как только вы внедрите его в HTML или что-то подобное, у вас начнутся проблемы. Вы должны знать, что на самом деле ускользает, читает, передает вашу строку.
Мой простой случай был:
tbox.innerHTML = tbox.innerHTML + '<div class="thisbox_des" style="width:210px;" onmouseout="clear()"><a href="/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>'
Вы можете найти \'в третьем поле шоу.
Двойная кавычка не сработала!
Понятно почему, но также понятно, почему мы должны придерживаться одинарных кавычек...
Этот случай представляет собой очень простое встраивание HTML, ошибка была сгенерирована простым копированием / вставкой из кода JavaScript с двойными кавычками.
Итак, чтобы ответить на вопрос:
Попробуйте использовать одинарные кавычки в HTML. Это может спасти пару проблем отладки...
Не уверен, что это актуально в современном мире, но двойные кавычки использовались для контента, который должен обрабатываться управляющими символами, и одинарные кавычки для строк, которые этого не делали.
Компилятор будет запускать манипуляции со строками для строки в двойных кавычках, оставляя строку в одинарных кавычках буквально нетронутой Раньше это приводило к тому, что "хорошие" разработчики выбирали одинарные кавычки для строк, которые не содержали контрольных символов, таких как \n или же \0 (не обрабатывается в одинарных кавычках) и двойные кавычки, когда они нуждаются в разборе строки (с небольшими затратами в циклах процессора для обработки строки).
Это в основном вопрос стиля и предпочтений. В других ответах есть несколько довольно интересных и полезных технических исследований, так что, пожалуй, единственное, что я могу добавить, это дать немного мирских советов.
Если вы программируете в компании или команде, то, вероятно, стоит следовать "домашнему стилю".
Если вы один взламываете несколько побочных проектов, посмотрите на нескольких видных лидеров сообщества. Например, допустим, вы попали в Node.js. Взгляните на основные модули, например underscore.js или express, и посмотрите, какое соглашение они используют, и подумайте о том, чтобы им следовать.
Если оба соглашения используются в равной степени, то перенесите на ваш личный
предпочтение.Если у вас нет личных предпочтений, подбросьте монету.
Если у вас нет монеты, то пиво на мне;)
Если вы используете jshint, то возникнет ошибка, если вы используете двойные кавычки.
Я использовал его через Yeoman леса AngularJS, но, возможно, есть какой-то способ настроить это.
Кстати, когда вы обрабатываете HTML в JavaScript, проще использовать одинарные кавычки:
var foo = '<div class="cool-stuff">Cool content</div>';
И, по крайней мере, JSON использует двойные кавычки для представления строк.
Там нет тривиального способа ответить на ваш вопрос
В JavaScript нет разницы между одинарными и двойными кавычками.
Спецификация важна:
Возможно, существуют различия в производительности, но они абсолютно минимальны и могут меняться каждый день в зависимости от реализации браузера. Дальнейшее обсуждение бесполезно, если ваше JavaScript-приложение не имеет длины в сотни тысяч.
Это как ориентир, если
a=b;
быстрее чем
a = b;
(лишние пробелы)
сегодня в конкретном браузере и платформе и т. д.
Говоря о производительности, кавычки никогда не станут вашим узким местом, однако производительность в обоих случаях одинакова.
Говоря о скорости кодирования, если вы используете ' для разграничения строки вам нужно будет экранировать " цитаты. Вы, скорее всего, должны использовать " внутри строки, например:
//JSON Objects:
var jsonObject = '{"foo":"bar"}';
//HTML attributes:
document.getElementById("foobar").innerHTML = '<input type="text">';
Тогда я предпочитаю использовать ' для разграничения строки, поэтому я должен экранировать меньше символов.
Изучение плюсов и минусов
В пользу одинарных кавычек
- Менее визуальный беспорядок.
- Генерация HTML: атрибуты HTML обычно разделяются двойными кавычками.
elem.innerHTML = '<a href="' + url + '">Hello</a>';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!\"'Одинарные кавычки для внутренних строк и двойные для внешних. Это позволяет отличать внутренние константы от строк, которые должны отображаться пользователю (или записываться на диск и т. Д.). Очевидно, вам следует избегать добавления последних в ваш код, но это не всегда можно сделать.
Одна (глупая) причина использовать одинарные кавычки состоит в том, что они не требуют от вас нажатия клавиши Shift для их ввода, тогда как двойные кавычки делают. (Я предполагаю, что средняя строка не требует экранирования, что является разумным предположением.) Теперь давайте предположим, что каждый день я кодирую 200 строк кода. Может быть, в этих 200 строках у меня 30 цитат. Возможно, ввод двойной кавычки занимает на 0,1 секунды больше времени, чем ввод одинарной кавычки (потому что я должен нажать клавишу Shift). Затем в любой день я трачу 3 секунды. Если я буду кодировать таким образом 200 дней в году в течение 40 лет, то я потрачу впустую 6,7 часа своей жизни. Пища для размышлений.
Еще одна вещь, которую вы могли бы рассмотреть в качестве причины перехода от двойных кавычек к одиночным, - это рост популярности серверных сценариев. При использовании PHP вы можете передавать переменные и анализировать функции JavaScript, используя строки и переменные в PHP.
Если вы пишете строку и используете двойные кавычки для своего PHP, вам не придется избегать ни одной из одинарных кавычек, и PHP автоматически получит значение переменных для вас.
Пример: мне нужно запустить функцию javascript, используя переменную с моего сервера.
public static function redirectPage( $pageLocation )
{
echo "<script type='text/javascript'>window.location = '$pageLocation';</script>";
}
Это избавляет меня от хлопот, связанных с объединением строк, и я могу эффективно вызывать JavaScript из PHP. Это только один пример, но это может быть одной из нескольких причин, почему программисты по умолчанию используют одинарные кавычки в javascript.
Цитата из документов PHP: "Самая важная особенность строк в двойных кавычках заключается в том, что имена переменных будут расширены. Подробности смотрите в разборе строк".
Есть люди, которые утверждают, что видят различия в производительности: старая ветка списка рассылки. Но я не смог найти ни одного из них, чтобы подтвердить.
Главное - посмотреть, какие кавычки (двойные или одинарные) вы используете внутри своей строки. Это помогает сохранить количество побегов на низком уровне. Например, когда вы работаете с html внутри ваших строк, проще использовать одинарные кавычки, чтобы вам не пришлось экранировать все двойные кавычки вокруг атрибутов.
При использовании CoffeeScript я использую двойные кавычки. Я согласен, что вы должны выбрать любой из них и придерживаться его. CoffeeScript дает вам интерполяцию при использовании двойных кавычек.
"This is my #{name}"
ES6 использует обратные галочки (`) для строк шаблона. Что, вероятно, имеет вескую причину, но при кодировании может быть затруднительно изменить символ строковых литералов с кавычек или двойных кавычек на обратные тики, чтобы получить возможность интерполяции. CoffeeScript может быть не идеальным, но использование везде одинаковых символов строковых литералов (двойные кавычки) и всегда возможность интерполировать - хорошая функция.
`This is my ${name}`
Я выполнял следующие около 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));
Теперь, когда наступил 2020 год, мы должны рассмотреть третий вариант для JavaScript: единый обратный апостроф для всего.
Это можно использовать везде вместо одинарных или двойных кавычек.
Это позволяет вам делать все!
Встраивание одиночные кавычки внутри него: `Это здорово '!
Встраивание двойные кавычки внутри него: `Это"действительно"большой`!
Использование строки интерполяции: `Это"${лучше}", чем большой`!
Это позволяет несколько строк: `
Эта
Делает
JavaScript
Лучше!
`
Это также не вызывает потери производительности при замене двух других: Обратные кавычки (``) медленнее, чем другие строки в JavaScript?
Я бы использовал двойные кавычки, когда нельзя использовать одинарные кавычки, и наоборот:
"'" + singleQuotedValue + "'"
'"' + doubleQuotedValue + '"'
Вместо:
'\'' + singleQuotedValue + '\''
"\"" + doubleQuotedValue + "\""
Если вы перепрыгиваете вперед между JavaScript и C#, лучше потренировать пальцы для общего соглашения, заключающегося в двойных кавычках.
Строго нет никакой разницы, так что это в основном вопрос вкуса и того, что находится в строке (или, если сам код JS находится в строке), чтобы сохранить число выходов низким.
Легенда о разнице в скорости может исходить из мира PHP, где две кавычки ведут себя по-разному.
Прочитав все ответы, в которых говорится, что это может быть быстрее или может иметь преимущества, я бы сказал, что двойные кавычки лучше, а может, и быстрее, потому что компилятор Google замыкания конвертирует одинарные кавычки в двойные кавычки.
Если ваш источник 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"]
Я уверен, что это займет некоторое время.
Разница чисто стилистическая. Раньше я был нацистом с двойными кавычками. Теперь я использую одинарные кавычки почти во всех случаях. Нет никакой практической разницы, кроме того, как ваш редактор выделяет синтаксис.