Литералы¶
Литералы — это фиксированные значения, которые являются примитивами JavaScript.
Строковые литералы¶
Вы можете использовать строковый литерал в качестве типа. Например:
let foo: 'Hello'; Здесь мы создали переменную с именем foo , которая позволяет присваивать ей только литеральное значение ‘Hello’ . Это продемонстрировано ниже:
let foo: 'Hello'; foo = 'Bar'; // Ошибка: "Bar" нельзя назначить типу "Hello" Они не очень полезны сами по себе, но могут быть собраны в тип объединение для создания мощной (и полезной) абстракции, например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
type CardinalDirection = | 'North' | 'East' | 'South' | 'West'; function move( distance: number, direction: CardinalDirection ) // . > move(1, 'North'); // Okay move(1, 'Nurth'); // Ошибка! Другие литеральные типы¶
TypeScript также поддерживает литеральные типы boolean и number , например:
type OneToFive = 1 | 2 | 3 | 4 | 5; type Bools = true | false; Логический вывод¶
Как правило, вы получаете сообщение об ошибке: Тип string не может быть назначен для типа «foo» . Следующий пример демонстрирует это.
1 2 3 4 5 6
function iTakeFoo(foo: 'foo') <> const test = someProp: 'foo', >; iTakeFoo(test.someProp); // Ошибка: Аргумент типа string не может быть // назначен параметру типа 'foo' Это потому, что test подразумевает тип . Решением в этом случае было бы использование простого утверждения типа. Для того чтобы сообщить TypeScript литерал, который вы хотите, чтобы он выводил, как показано ниже:
1 2 3 4 5
function iTakeFoo(foo: 'foo') > const test = someProp: 'foo' as 'foo' >; iTakeFoo(test.someProp); // Okay! или используйте описание типа, которое поможет TypeScript понять правильный тип в точке объявления:
1 2 3 4 5 6 7 8 9
function iTakeFoo(foo: 'foo') <> type Test = someProp: 'foo', >; const test: Test = // Пометки - подразумевается, что someProp всегда === 'foo' someProp: 'foo', >; iTakeFoo(test.someProp); // Okay! Случаи использования¶
Возможные варианты использования для строковых литералов:
Тип перечисление на основе строк¶
Тип перечисление в TypeScript основан на числах. Вы можете использовать строковые литералы вместе с объединенными типами, чтобы сымитировать перечисление на основе строки, как мы это делали в примере CardinalDirection выше. Вы даже можете сгенерировать структуру Key: Value , используя следующую функцию:
1 2 3 4 5 6 7 8 9
/** Утилита для создания K:V из списка строк */ function strEnumT extends string>( o: ArrayT> ): [K in T]: K > return o.reduce((res, key) => res[key] = key; return res; >, Object.create(null)); > А затем сгенерируйте тип объединение из литеральных типов, используя keyof typeof . Вот полный пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
/** Утилита для создания K:V из списка строк */ function strEnumT extends string>( o: ArrayT> ): [K in T]: K > return o.reduce((res, key) => res[key] = key; return res; >, Object.create(null)); > /** * Пример создания типа объединение на основе строк */ /** Создать K:V */ const Direction = strEnum([ 'North', 'South', 'East', 'West', ]); /** Создать тип */ type Direction = keyof typeof Direction; /** * Пример использования типа объединение на основе строк */ let sample: Direction; sample = Direction.North; // Okay sample = 'North'; // Okay sample = 'AnythingElse'; // ОШИБКА! Моделирование имеющихся JavaScript API¶
Например В редакторе CodeMirror есть опция readOnly , которая может быть либо boolean , либо литеральной строкой «nocursor» (валидные допустимые значения true,false,»nocursor» ). Это может быть объявлено как:
readOnly: boolean | 'nocursor'; Литерал объекта
Самый простой способ создать объект заключается во включении в программу литерала объекта.
Литерал объекта — это заключенный в фигурные скобки список свойств (пар имя/значение), разделенных запятыми.
Именем свойства может быть идентификатор или строковый литерал (допускается использовать пустую строку). Значением свойства может быть любое выражение, допустимое в JavaScript, – значение выражения (это может быть простое значение или объект) станет значением свойства. Ниже приводится несколько примеров создания объектов:
var empty = <>; // Объект без свойств var point = < x:0, y:0 >; // Два свойства var point2 = < x:point.x, y:point.y+1 >; // Более сложные значения var book = < "main title": "JavaScript", // Имена свойств с пробелами 'sub-title': "The Definitive Guide", // и дефисами, поэтому используются строковые литералы "for": "all audiences", // for - зарезервированное слово, поэтому в кавычках author: < // Значением этого свойства является firstname: "David", // объект. Обратите внимание, что surname: "Flanagan" // имена этих свойств без кавычек. > >; В ECMAScript 5 последняя запятая, следующая за последним свойством в литерале объекта, игнорируется. В боль- шинстве реализаций ECMAScript 3 завершающие запятые также игнорируются, но IE интерпретирует их наличие как ошибку.
Литерал объекта — это выражение, которое создает и инициализирует новый объект всякий раз, когда производится вычисление этого выражения. Значение каждого свойства вычисляется заново, когда вычисляется значение литерала. Это означает, что с помощью единственного литерала объекта можно создать множество новых объектов, если этот литерал поместить в тело цикла или функции, которая будет вызываться многократно, и что значения свойств этих объектов могут отличаться друг от друга.
results matching » «
No results matching » «
JavaScript Шаблоны. Литералы и конструкторы.
Можно сказать, что литерал — это чистое значение, которое встречается в приложении.
Один из способов создать объект — с помощью литерала:
var user = <>; // создали пустой объект user.name = 'admin'; user.getName = function ()
Однако для создания объектов лучше использовать литерал, который сразу определяет его структуру (если, конечно, эта структура заранее известна):
var user2 = < name: 'admin', getname: function () < return this.name; >>; Есть и другой способ создания объекта: с помощью конструктора и ключевого слова new.
var user3 = new Object(); // то же самое, что и <>, но на порядок больше кода user3.name = 'admin'; user3.getName = function ()
Первый вывод, который можно сделать: литералы стоит применять хотя бы потому, что объем кода при этом получается меньше, чем при использовании конструктора. В первую очередь это касается создания пустых объектов.
Но все-таки конструкторы — это системные объекты и некоторые из них тоже стоит использовать, например, конструктор Date(). Тем более, что с помощью литерала мы не сможем создать конструктор Date().
Кроме того, конструктор Object() может стать причиной неоднозначности вашего кода. На самом деле конструктор Object() является фабрикой и, в зависимости от входящего в него параметра, может полностью поменять принцип своего поведения.
Конструктор Object() может принимать параметр и делегировать вызов другому встроенному конструктору, вернув в результате объект другого типа.
var obj = new Object(); console.log( obj.constructor === Object ); // true var obj = new Object(1); // здесь произойдет перевызов и создасться не пустой объект, а объект типа Number со всеми присущими ему методами console.log( obj.constructor === Number ); // true console.log( 'obj.toFixed(3) = ' + obj.toFixed(3) ); // 1.000 var obj = new Object('Hello world'); console.log( obj.constructor === String ); // true var obj = new Object(true); console.log( obj.constructor === Boolean ); // true Из примеров выше понятно, в какой тип данных будет преобразован Object по литералу в параметрах вызова. Однако, если мы передаем в параметры переменную, определенную где-то выше в приложении, то уже становится не понятно, в какой тип будет преобразован Object. Такой код нечитабелен и сложнее будет сопровождаться в будщем: var obj = new Object(a); .
Вывод: если мы создаем объект, который будет в единственном числе использоваться в приложении, лучше использовать подход с применением литерала и определением внутри него всех необходимых свойств и методов объекта. Однако, если планируется штамповать объекты, то использование литерала становится неудобным для этого. Чтобы организовать работу с большим кол-вом объектов, правильно использовать конструкторы, а не литералы.
Пользовательские конструкторы
В JS понятие конструктора (как и, например, понятие классов) условно, т.к. в языке нет специальных ключевых слов обозначающих конструктор. И конструктор и обычная функция синтаксически оформляются одинаково. Однако есть ряд признаков, по которым формально можно отделить конструктор от обычной функции.
Во-первых, идентификатор (имя) конструктора всегда пишется с заглавной буквы. И это не соглашение между разработчиками, как многие думают. Это заложено в самом языке. Убедиться в этом можно, если вызвать в консоли объект Window и посмотреть на его свойства и методы: сначала будут идти методы с заглавной буквы — это конструкторы, которые нужно вызывать с ключевым словом new; а затем будут идти методы с прописной буквы — это обычные методы, которые выполняют какую-то функцию.
Во-вторых, в теле конструктора активно используется ключевое слово this. Когда мы говорим о функциях, то кючевое слово this правильно называть контекстом. В разных ситуациях контекст может ссылаться на глобальный объект (window), на новый объект или на объект, которому принадлежит эта функция. Ключевое слово this в теле конструктора — это пустой объект, которому мы добавляем свойства и методы.
При вызове функции с оператором new происходит следующее:
- Создается пустой объект
- Пустой объект наследует свойства и методы прототипа функции
- Ссылка на этот объект сохраняется в переменной this
- В конструкторе добавляются новые свойства и методы в пустой объект.
- В конце функции неявно возвращается объект, на который ссылается this
function User(name) < this.name = name; // this - контекст this.say = function () < document.write( 'Hello! My name is ' + this.name ); >> var user = new User('John'); Однако в примере выше мы используем конструктор не в полной мере. Мы используем его как обычную функцию, которая не дает нам никаких преимуществ. Главное преимущество конструкторов заключается в том, что создаваемые объекты используют прототип.
Методы конструктора лучше не писать в нем самом, а выносить за передлы конструктора в прототип.
function User2(name) < this.name = name; // Создавая метод в объекте бессмысленно расходуется память, // т.к. каждый новый объект, созданный этой функцией конструктором, будет содержать в себе копию метода. // this.say = function () < // document.write( 'Hello! My name is ' + this.name ); // >> // Хорошей практикой считается добавление методов к прототипу конструктора User2.prototype.say = function () < document.write( 'Hello! My name is ' + this.name ); >var user = new User2('Иван'); По сути, когда мы пишем оператор new для вызова функции, то контекстом этой функции будет новый объект. Без оператора new контекст функции будет ссылаться на глобальный объект.
function User3(name) < this.name = name; >var a = new User3('Стив Джобс'); // вызываем функцию через оператор new console.log( a.name ); // Стив Джобс - контекст функции ссылается на новый объект var b = User3('Билл Гейтс'); // вызываем функцию без оператора new console.log( b ); // undefined console.log( window.name ); // Билл Гейтс - контекст функции ссылается на глобальный объект В сухом остатке:
- конструкторы всегда нужно называть с заглавной буквы,
- если в коде встречается функция, у которой имя с заглавной буквы, — это конструктор и вызывать его нужно с помощью оператора new (даже если внутри он реализован каким-то хитрым способом, не требующим применения new — подробнрее см. ниже)
Мы не можем гарантировать, что другой разработчик вызовет наш конструктор правильно с ключевым словом new. Для решение этой проблемы существует несколько способов принудительного вызова оператора new
Шаблон принудительного вызова ключевого слова new №1
Данная функция всегда будет возвращать объект, даже если будет вызвана без оператора new. Недостаток заключается в том, что будет утеряна связь с прототипом. Поэтому это не столько конструктор, сколько обычная фнкция, которая настраивает и возвращает объект с определенной структурой
function User4(name) < var that = <>; that.name = name; return that; this.name = name; > var a = new User4('Альберт Эйнштейн'); console.log( a.name ); // Альберт Эйнштейн var b = User4('Нильс Бор'); console.log( b ); // Object console.log( window.name ); // undefined Шаблон принудительного вызова ключевого слова new №2
Сохраняется связь с прототипом
function User5(name) < // Если контекст не является экземпляром конструктора, а стало быть это экземпляр window if ( ! (this instanceof User5) ) < return new User5(name); // то возвращаем вызов конструктора с помощью оператора new >this.name = name; > var a = new User5('Бред Питт'); console.log( a.name ); // Бред Питт var b = User5('Джони Депп'); console.log( b ); // User5 console.log( window.name ); // undefined Если мы начали создавать конструктор и поняли, что у него нет методов, которые можно вынести в прототип, то возможно нам и не нужен конструктор, а нужна обычная функция, которая будет точно также штамповать объекты с одинаковыми свойствами, но без использования прототипов.
Литералы массивов
В JS нет массивов в том понимании, в котором мы привыкли в других ЯП. Массив в C# — это непрерывная последовательность байт в оперативной памяти. Мы не можем просто так добавить в этот массив новый элемент, не создав новый массив на большее кол-во записей.
В JS массивы — это обычные объекты и нет разницы между объектом, который был создан фигурными скобками <> и объектом, который был создан квадратными скобками [] с точки зрения организации в оперативной памяти. Объект — это набор значений, где у каждого значения есть свое имя. Массив — это набор значений, где у каждого значения есть свой порядковый номер.
Массивы в JS — это аналог ассоциативных массивов в других языках, например, как dictionary в языке C#, где записи представляют собой пары ключ-значение.
Массивы тоже желательно создавать с помощью литерала.
Формально массивы в JS всегда рассматриваются отдельно, но номинально такого типа данных как Array в JS не существует.
var someArrayA = new Array('Hello! ', 'World', '!'); var someArrayB = ['Hello! ', 'World', '!']; document.write( typeof someArrayA ); // object document.write( someArrayA.constructor === Array ); // true document.write( typeof someArrayB ); // object document.write( someArrayB.constructor === Array ); // true Неважно как мы создали массив: с помощью конструктора или литерала. В любом случае он будет принадлежать к типу данных object и для создания объекта используется конструктор Array().
Кроме того, при использовании конструктора, есть подводные камни:
var someArrayC = new Array(); // пустой массив var someArrayD = new Array('Hello! ', 'World', '!'); // массив на 3 элемента со значениями Если конструктору массива передать 1 значение, то оно НЕ станет первым элементом массива.
var someArrayE = new Array(10); // пустой массив на 10 элементов var someArrayF = new Array(3.5); // ошибка - нельзя создать массив на 3.5 элемента var someArrayD = new Array('Hello!'); // Ошибка - нельзя создать массив на кол-во элементов Hello! Поэтому всегда лучше создавать массивы с помощью литерала, т.к. короче синтаксис и экономия памяти.
Работа с простыми (примитвными) типами данных
Примитивы также лучше определять с помощью литералов.
var someNumA = 100; // простое число, тип number
var someNumB = new Number(100);
Вторая запись: 1) длиннее; 2) конструктор будет тянуть за собой все свои методы, а оно надо? 3) при проверке на тип, будет возвращать object, а не number
Возникает вопрос: если мы создаем примитивы с помощью литералов, а у них тип не object, то как же тогда пользоваться методами типа toString() или toFixed() и т.п.? Ответ простой: вызывать на примитивах методы точно так же, как если бы мы пользовались объектами. Дело в том, что во время вызова метода на примитиве, он временно преобразуется в объект.
var str = 'hello world'; document.write( str.toUpperCase() ); // при вызове метода строка временно преобразуется в объект String document.write( 'hello'.length ); // Свойства и методы можно вызывать непосредственно на значении Поэтому для создания объектов лучше использовать литералы
15. Текст: строковые литералы в JavaScript
Что такое текст, думаю, знают все. А что такое строка в JavaScript? Строка в JavaScript – это последовательность 16-битных значений, каждое значение является, в большинстве случаев, символом Юникода. Длина строки – количество 16-битных значений. Пустая строка – строка, длина которой равна 0.
Строковые литералы – символы, заключенные в одинарные или двойные кавычки. Для понимания: примеры строковых литералов.
"" /* Пустая строка */
'' /* Пустая строка */
' ' /* Пробел */
'Какая-то фраза'
"7199.12"
"don't"
"Здесь\nТри\nСтроки"В строковых литералах (в языке JavaScript) есть небольшая проблема, доставляющая неудобство. Строковые литералы должны быть записаны на одной строке и если вы разобьете фразу на две строки, то возникнет ошибка. Но разработчики JavaScript’a решили проблему так: после каждой строки ставить обратный слэш (\). Но здесь нужно быть очень внимательным! Если после обратного слэша есть хоть какой-то символ, даже пробел, то это получается опять ошибка. Далее пример:
/* Здесь все отлично */
"Раз строка\
Два строка\
Три строка"
/* А здесь после "Раз строка" есть пробел, который можно заметить, выделив этот код */
"Раз строка\
Два строка\
Три строка"Как подсчитать длину строки?
Свойство length можно использовать, чтобы определить длину строки. Далее пример:
var str = "двадцатичетырехбуквенный"; /* => 24 */
document.write(str.length);