Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS: Исправляет ошибки и форматирует (часть 10) #5377

Merged
merged 6 commits into from
Jul 8, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions js/null-primitive/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Null — это тип, единственным значением которо
Ожидается _объект_ пользователя, но пока неясна структура этого объекта:

```js
let personObj = null;
let personObj = null

personObj = {
name: 'Вася',
Expand All @@ -40,32 +40,33 @@ personObj = {

В языке существует похожее примитивное значение [`undefined`](/js/undefined/). Оно обозначает, что переменной ещё не присвоено значение. Их можно легко спутать, потому что оба обозначают отсутствие значения. Разница состоит в том, что `null` обозначает _намеренное_ отсутствие значения _объекта_ (объект без заданной структуры), а `undefined` — что переменной (не объекту) ещё не присвоено значение.

Например, сам JavaScript использует `undefined` для обозначения не проинициализированных переменных:
Например, сам JavaScript использует `undefined` для обозначения неинициализированных переменных:

```js
// ожидается строка (не объект)
// Ожидается строка (не объект)
let personName

console.log(personName)
// undefined

// в явном виде говорим, что значение отсутствует
// В явном виде говорим, что значение отсутствует
personName = undefined

// ожидается объект пользователя, но пока неясна структура этого объекта
let personObj = null;
// Ожидается объект пользователя,
// но пока неясна структура этого объекта
let personObj = null

personObj = {
name: 'Вася',
age: 25,

// название профессии, строка
// Название профессии, строка
// Вася ещё не определился с профессией, поэтому undefined
profession: undefined,
}

// функция должна вернуть объект
// но в случае, если объект вернуть нельзя, возвращает null
// Функция должна вернуть объект
// В случае, если объект вернуть нельзя, возвращает null
function returnObject (condition) {
if (condition === true) {
return {
Expand All @@ -74,7 +75,8 @@ function returnObject (condition) {
}
}

// функция не смогла вернуть объект, возвращаем объект с неопределённой структурой
// Функция не смогла вернуть объект,
// возвращаем объект с неопределённой структурой
return null
}
```
8 changes: 4 additions & 4 deletions js/null-primitive/practice/nlopin.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ console.log(typeof null)
🛠 Разделение между `undefined` и `null` такое:

- `undefined` обозначает, что переменной не присвоено значение, и эта переменная не объект;

- `null` — объект с неопределённой структурой.

Например, приложение ожидает ответ от сервера вида:
Expand All @@ -23,11 +22,12 @@ const data = {
Если нам, по какой-то причине, нужно заранее инициализировать переменную `data`, то это можно сделать так:

```js
let data = null;
let data = null

// какая-то логика
// Какая-то логика

data = await getUsers(); // ожидаем ответ сервера в виде объекта
// Ожидаем ответ сервера в виде объекта
data = await getUsers()
```

Если что-то сломалось, то сервер должен вернуть именно `null` в ответ на запрос, потому что ожидался именно объект.
Expand Down
2 changes: 1 addition & 1 deletion js/number-is-nan/demos/index/index.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Калькулятор скидки — isNaN — Дока</title>
<title>Калькулятор скидки — Number.isNaN() — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
Expand Down
8 changes: 4 additions & 4 deletions js/number-is-nan/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@ Number.isNaN(false)

## Как понять

Существуют [ситуации](/js/number/#specialnye-znacheniya), когда результат математической обработки не может быть получен. Например, `Math.sqrt(-9)` или [`parseInt('text')`](/js/parseint/). Результатом выполнения в таком случае будет `NaN`. `NaN` расшифровывается как _Not a Number_, то есть «не число». Однако, он относится к числовому типу данных.
Существуют [ситуации](/js/number/#specialnye-znacheniya), когда результат математической обработки не может быть получен. Например, `Math.sqrt(-9)` или [`parseInt('text')`](/js/parseint/). Результатом выполнения в таком случае будет `NaN`. `NaN` расшифровывается как _Not a Number_, то есть «не число». При этом он относится к числовому типу данных.

```js
typeof NaN
// 'number'
```

Сравнение `NaN` с чем угодно, даже с самим собой, вернёт `false`. Поэтому проверка результатов математических операций стандартным способом не принесёт успеха. В примере ниже валидация введённых пользователем данных не будет работать.
Сравнение `NaN` с чем угодно, даже с самим собой, вернёт `false`. Так что проверка результатов математических операций стандартным способом не принесёт успеха. В примере ниже валидация введённых пользователем данных не будет работать.

```js
function getUserAge() {
Expand Down Expand Up @@ -80,9 +80,9 @@ if (isNaN(age)) {
}
```

Однако, мы не рекомендуем использовать такой подход в разработке. Для проверки лучше применять статический метод `Number.isNaN()` у [обёртки `Number`](/js/number-wrapper/).
Однако мы не рекомендуем использовать такой подход в разработке. Для проверки лучше применять статический метод `Number.isNaN()` у [обёртки `Number`](/js/number-wrapper/).

Есть так же глобальная функция `isNaN()`, но она работает не всегда так, как ожидается и возвращает `true` и при значениях, отличных от `NaN`. Например:
Есть так же глобальная функция `isNaN()`, но она работает не всегда так, как ожидается, и возвращает `true` и при значениях, отличных от `NaN`. Например:

```js
isNaN(undefined)
Expand Down
6 changes: 3 additions & 3 deletions js/number-is-nan/practice/nlopin.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
🛠 При анализе ввода пользователя всегда нужно проверять результаты вычислений, иначе пользователь вместо расчётанапример «Итого» в корзине увидит непонятные для себя символы. Вот, к примеру, очень приятная цена ✈️
🛠 При анализе того, что ввёл пользователь, всегда проверяйте результаты вычислений. В противном случае пользователь вместо расчёта, например, «Итого», увидит в корзине непонятные символы. Вот, к примеру, очень приятная цена ✈️

![NaN цена за билет](../images/1.png)

Попробуйте имитировать ошибку и ввести в поле что-то помимо числа скидки, без проверки тоже получится `NaN`:
Попробуйте сымитировать ошибку и ввести в поле что-то помимо числа скидки: без проверки тоже получится `NaN`:

<iframe title="Калькулятор скидки — Number.isNaN() — Дока" src="../demos/index/" height="430"></iframe>
<iframe title="Калькулятор скидки" src="../demos/index/" height="430"></iframe>
4 changes: 2 additions & 2 deletions js/number-isfinite/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ isFinite('10e3')

## Как пишется

Метод `Number.isFinite()` принимает только один аргумент число, которое нужно проверить. Для любого нечислового значения метод вернёт `false`.
Метод `Number.isFinite()` принимает только один аргумент число, которое нужно проверить. Для любого нечислового значения метод вернёт `false`.

<aside>

Expand All @@ -66,7 +66,7 @@ Number.isFinite({})
// false потому что передан объект
Number.isFinite(Infinity)
// false потому что передали бесконечность
Number.isFinite(NaN) //
Number.isFinite(NaN)
// false потому что передали не число

Number.isFinite(123)
Expand Down
11 changes: 7 additions & 4 deletions js/number-isfinite/practice/windrushfarer.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
🛠 `Number.isFinite` можно использовать для того, чтобы проверить что значение в переменной является обычным конечным числом. Так как бесконечность тоже является числом, то проверка с помощью `typeof` вернёт `"number"`. Но чаще всего мы не хотим работать в программе с бесконечными числами, потому что с ними нельзя провести математические операции.
🛠 `Number.isFinite` можно использовать для того, чтобы проверить, что значение в переменной является обычным конечным числом. Так как бесконечность тоже является числом, то проверка с помощью `typeof` вернёт `number`. Чаще всего мы не хотим работать в программе с бесконечными числами, потому что с ними нельзя провести математические операции.

TatianaFokina marked this conversation as resolved.
Show resolved Hide resolved
```js
const inf = Infinity;
const inf = Infinity

console.log(typeof Infinity === 'number')
// true

console.log(typeof Infinity === "number") // true
// Проверка поможет отсеять бесконечные числа
console.log(Number.isFinite(inf)) // false
console.log(Number.isFinite(inf))
// false
```
2 changes: 1 addition & 1 deletion js/number-wrapper/demos/number-format/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Number - метод toLocaleString</title>
<title>Метод toLocaleString() — Обёртка Number — Дока</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Expand Down
40 changes: 25 additions & 15 deletions js/number-wrapper/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ tags:

`Number` — это обёртка над [примитивным числовым типом](/js/number/), которая содержит дополнительные значения и методы работы с числами:

- проверки на специальные значения [`isNaN()`](/js/number-is-nan/), [`isFinite()`](/js/number-isfinite/).
- проверки на специальные значения [`isNaN()`](/js/number-is-nan/), [`isFinite()`](/js/number-isfinite/);
- конвертирование в строку [`toString()`](/js/number-tostring/) и `toLocaleString()`.

Числа автоматически оборачиваются в обёртку `Number` при вызове методов над ними.
Expand All @@ -37,11 +37,14 @@ const num = new Number(100)
```js
console.log(typeof primitive)
// number

console.log(typeof num)
// object

console.log(num == 100)
// true, при приведении к числовому типу значения будут одинаковыми
// true, при приведении к числовому типу значения
// будут одинаковыми

console.log(num === 100)
// false, потому что разные типы данных
```
Expand All @@ -65,7 +68,6 @@ console.log((5).toFixed(3))

console.log(6..toFixed(3))
// '6.000'

```

## Как понять
Expand All @@ -80,22 +82,23 @@ console.log(6..toFixed(3))

Тип данных «число» содержит [три специальных значения](/js/number/#specialnye-znacheniya): `NaN`, `Infinity` и `-Infinity`.

Обёртка предоставляет две полезные функции для проверки специальных значений:
Обёртка предоставляет две полезные функции для проверки специальных значений.

1️⃣ Функция [`Number.isNaN()`](/js/number-is-nan/) — нативный способ проверить значение на `NaN`, потому что `NaN` не равен ничему, даже самому себе:

```js
const nanResult = 5 * undefined
console.log(nanResult == NaN)
// false

console.log(nanResult === NaN)
// false

console.log(Number.isNaN(nanResult))
// true
```

2️⃣ Функция [`Number.isFinite()`](/js/number-isfinite/) — проверит, что значение не является специальным. Возвращает `true`если при вызове в неё было передано число и `false` если специальное значение или нечисловой тип:
2️⃣ Функция [`Number.isFinite()`](/js/number-isfinite/) — проверит, что значение не является специальным. Возвращает `true`, если при вызове в неё было передано число, и `false`, если специальное значение или нечисловой тип:

```js
const number = 4
Expand All @@ -111,12 +114,11 @@ console.log(Number.isFinite(inf))
// false
console.log(Number.isFinite(string))
// false

```

### Форматирование числа

Обёртка содержит несколько методов для форматирования числа:
Обёртка содержит несколько методов для форматирования числа.

1️⃣ Метод [`toString()`](/js/number-tostring/) преобразует число в строку в указанной системе счисления. По умолчанию используется десятичная, но можно использовать и другую:

Expand All @@ -125,6 +127,7 @@ const num = 5

console.log(num.toString())
// '5'

console.log(num.toString(2))
// '101' в двоичной системе счисления
```
Expand Down Expand Up @@ -163,7 +166,7 @@ console.log(num.toFixed())

Локаль — это информация о языке пользователя, а также региональных настройках: какие символы чисел используются, какие разделители между разрядами считаются стандартными и так далее.

Локаль представляет собой [строку сформированную по спецификации](https://datatracker.ietf.org/doc/html/rfc5646). Чаще всего используются два вида:
Локаль представляет собой [строку, сформированную по спецификации](https://datatracker.ietf.org/doc/html/rfc5646). Чаще всего используются два вида:

- `код_языка`. Например, `'ru'` (русский язык), `'de'` (немецкий), `'en'` (английский).
- `код_языка-код_региона`. Например, `de-AT` (австрийский немецкий), `'en-US'` (американский английский), `es-AR` (аргентинский испанский).
Expand All @@ -173,21 +176,28 @@ console.log(num.toFixed())
```js
const bigNumber = 100_000_000

console.log(bigNumber.toLocaleString("ru")) // 100 000 000
console.log(bigNumber.toLocaleString("en-US")) // 100,000,000
console.log(bigNumber.toLocaleString("ar-SA")) // ١٠٠٬٠٠٠٬٠٠٠
console.log(bigNumber.toLocaleString("ru"))
// 100 000 000

console.log(bigNumber.toLocaleString("en-US"))
// 100,000,000

console.log(bigNumber.toLocaleString("ar-SA"))
// ١٠٠٬٠٠٠٬٠٠٠
```

<iframe title="Number - метод toLocaleString" src="demos/number-format/" height="150"></iframe>
<iframe title="Метод toLocaleString()" src="demos/number-format/" height="150"></iframe>

Вторым аргументом в метод можно передать объект с тонкими настройками форматирования. Например, указать, что форматируемое число — деньги:

```js
const bigNumber = 100_000_000
console.log(bigNumber.toLocaleString('es', { style: 'currency', currency: 'EUR' }))
console.log(bigNumber.toLocaleString('es',
{ style: 'currency', currency: 'EUR' }))
// 100.000.000,00 €

console.log(bigNumber.toLocaleString('ru', { style: 'currency', currency: 'RUB', minimumFractionDigits: 0 }))
console.log(bigNumber.toLocaleString('ru',
{ style: 'currency', currency: 'RUB', minimumFractionDigits: 0 }))
// 100 000 000 ₽
```

Expand All @@ -200,4 +210,4 @@ console.log(bigNumber.toLocaleString('ru', { style: 'currency', currency: 'RUB',
- `Number.MAX_VALUE` — максимально большое число, представимое с помощью числового типа;
- `Number.MIN_VALUE` — минимальное _положительное_ число, представимое с помощью числового типа.

Важно отметить, что `Number.MAX_VALUE` много больше, чем `Number.MAX_SAFE_INTEGER`, из-за особенностей хранения чисел с плавающей точкой.
Важно отметить, что `Number.MAX_VALUE` намного больше, чем `Number.MAX_SAFE_INTEGER`, из-за особенностей хранения чисел с плавающей точкой.
Loading
Loading