Фронтендщик
الذهاب إلى القناة على Telegram
Все для frontend developer, шуточки, тесты, статьи Администрация/Реклама @vtopua
إظهار المزيد1 085
المشتركون
لا توجد بيانات24 ساعات
+17 أيام
-1230 أيام
جاري تحميل البيانات...
القنوات المماثلة
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
سبتمبر '26
سبتمبر '26
+1
في 0 قنوات
أغسطس '26
+1
في 0 قنوات
Get PRO
يوليو '26
+1
في 0 قنوات
Get PRO
يونيو '260
في 1 قنوات
Get PRO
مايو '260
في 0 قنوات
Get PRO
أبريل '260
في 1 قنوات
Get PRO
مارس '26
+1
في 0 قنوات
Get PRO
فبراير '26
+1
في 0 قنوات
Get PRO
يناير '260
في 0 قنوات
Get PRO
ديسمبر '25
+1
في 0 قنوات
Get PRO
نوفمبر '25
+1
في 0 قنوات
Get PRO
أكتوبر '250
في 0 قنوات
Get PRO
سبتمبر '25
+7
في 0 قنوات
Get PRO
أغسطس '25
+1
في 0 قنوات
Get PRO
يوليو '25
+2
في 0 قنوات
Get PRO
يونيو '25
+1
في 0 قنوات
Get PRO
مايو '250
في 0 قنوات
Get PRO
أبريل '25
+1
في 0 قنوات
Get PRO
مارس '25
+6
في 0 قنوات
Get PRO
فبراير '25
+4
في 0 قنوات
Get PRO
يناير '25
+2
في 0 قنوات
Get PRO
ديسمبر '240
في 1 قنوات
Get PRO
نوفمبر '24
+1
في 0 قنوات
Get PRO
أكتوبر '24
+1
في 0 قنوات
Get PRO
سبتمبر '24
+2
في 0 قنوات
Get PRO
أغسطس '24
+2
في 0 قنوات
Get PRO
يوليو '24
+3
في 0 قنوات
Get PRO
يونيو '24
+3
في 0 قنوات
Get PRO
مايو '24
+4
في 0 قنوات
Get PRO
أبريل '24
+3
في 0 قنوات
Get PRO
مارس '24
+3
في 0 قنوات
Get PRO
فبراير '24
+3
في 1 قنوات
Get PRO
يناير '24
+2
في 0 قنوات
Get PRO
ديسمبر '23
+3
في 0 قنوات
Get PRO
نوفمبر '23
+4
في 0 قنوات
Get PRO
أكتوبر '23
+3
في 0 قنوات
Get PRO
سبتمبر '23
+8
في 0 قنوات
Get PRO
أغسطس '23
+4
في 0 قنوات
Get PRO
يوليو '23
+14
في 0 قنوات
Get PRO
يونيو '23
+6
في 0 قنوات
Get PRO
مايو '23
+8
في 0 قنوات
Get PRO
أبريل '23
+41
في 0 قنوات
Get PRO
مارس '23
+6
في 0 قنوات
Get PRO
فبراير '23
+9
في 0 قنوات
Get PRO
يناير '23
+17
في 0 قنوات
Get PRO
ديسمبر '22
+177
في 0 قنوات
Get PRO
نوفمبر '22
+142
في 0 قنوات
Get PRO
أكتوبر '22
+26
في 0 قنوات
Get PRO
سبتمبر '22
+328
في 0 قنوات
Get PRO
أغسطس '22
+1 290
في 0 قنوات
Get PRO
يوليو '22
+106
في 0 قنوات
Get PRO
يونيو '22
+2
في 0 قنوات
Get PRO
مايو '220
في 0 قنوات
Get PRO
أبريل '220
في 0 قنوات
Get PRO
مارس '220
في 0 قنوات
Get PRO
فبراير '220
في 0 قنوات
Get PRO
يناير '220
في 0 قنوات
Get PRO
ديسمبر '210
في 0 قنوات
Get PRO
نوفمبر '21
+1
في 0 قنوات
Get PRO
أكتوبر '21
+1
في 0 قنوات
Get PRO
سبتمبر '21
+4
في 0 قنوات
Get PRO
أغسطس '210
في 0 قنوات
Get PRO
يوليو '210
في 0 قنوات
Get PRO
يونيو '21
+1
في 0 قنوات
Get PRO
مايو '210
في 0 قنوات
Get PRO
أبريل '21
+3
في 0 قنوات
Get PRO
مارس '21
+2
في 0 قنوات
Get PRO
فبراير '210
في 0 قنوات
Get PRO
يناير '21
+1
في 0 قنوات
Get PRO
ديسمبر '20
+1 226
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 03 سبتمبر | 0 | |||
| 02 سبتمبر | +1 | |||
| 01 سبتمبر | 0 |
منشورات القناة
Перехват исключений во вложенном коде в JavaScript
Особенность и удобство исключений заключаются в том, что их можно ловить при любом уровне вложенности кода. Посмотрим на примере. Пусть у нас есть функция, сохраняющая данные в локальное хранилище:
function save(str) {
localStorage.setItem('key',
str);
}
📌 #instr || Фронтендщик
| 2 | Если же при выполнении блока try никаких исключительных ситуаций не случилось, то полезный код просто выполнится, а код из блока catch - нет.
Для примера давайте попробуем разобрать JSON и в случае его некорректности выведем на экран сообщение об этом:
try {
let data = JSON.parse('{1,2,3,4,5}');
} catch (error) {
alert('невозможно выполнить
операцию разбора
JSON');
}
📌 #instr || Фронтендщик | 15 |
| 3 | В блоке try следует размещать код, который может содержать исключение. Если вдруг при выполнении этого кода возникнет исключительная ситуация, то наш скрипт не рухнет с ошибкой в консоли, а начнет выполнятся код блока catch.
В этом блоке мы должны каким-то адекватным образом отреагировать на ошибку. Например, если мы хотели отправить какие-то данные через интернет и интернет не работает, в блоке catch мы можем как-то справится с ситуацией: можно, например, выдать сообщение пользователю, а можно через некоторое время попытаться отправить данные опять - вдруг интернет уже заработал.
📌 #instr || Фронтендщик | 18 |
| 4 | Перехват исключений в JavaScript
Для перехвата исключений используется конструкция try-catch. Она имеет следующий синтаксис:
try {
// код
} catch (error) {
// обработка ошибки
}
📌 #instr || Фронтендщик | 19 |
| 5 |  Как JavaScript реагирует на такие исключительные ситуации? Он просто вываливает ошибку в консоль и прекращает дальнейшее выполнение скрипта.
Наша задача, как программистов, состоит в том, чтобы отловить такую ситуацию и как-то справится с ней, не давая программе совсем прекратить свое выполнение. Для этого существуют специальные конструкция try-catch, которую мы разберем в следующих уроках.
📌 #instr || Фронтендщик | 20 |
| 6 | А второе исключение возникает, когда локальное хранилище, выделенное под наш сайт переполняется (больше 5 мегабайт).
Давайте искусственно вызовем такое исключение:
let str = '';
for (let i = 1; i <= 6 * 10 ** 6; i++) { // формируем строку более 5 мб
str += '+';
}
localStorage.setItem('key',
str); // пытаемся записать в
хранилище
📌 #instr || Фронтендщик | 21 |
| 7 | Однако, исключительные ситуации есть. Мы разберем две самые простые и на их примере изучим работу с исключениями в JavaScript.
Первое исключение возникает, когда мы хотим разобрать некорректный JSON:
let data = JSON.parse('{1,2,3,4,5}');
// данный
json некорректен
📌 #instr || Фронтендщик | 18 |
| 8 | Виды возникающих ситуаций в JavaScript
В JavaScript очень мало ситуаций, в которых возникают исключения. Во-первых, просто потому, что очень мало мест для их возникновения.
Во-вторых, потому, что сам язык "всепрощающий": он на многое смотрит сквозь пальцы, например, на деление на ноль или на некорректный HTML код. Даже если вы укажете неверный путь к картинке, которую собираетесь загрузить, JavaScript вам простит и это и не посчитает исключением.
📌 #instr || Фронтендщик | 18 |
| 9 |  Программа, тем не менее, может продолжить свое выполнение: она может вывести информацию о проблеме, повторить попытку отправки через некоторое время, и так далее. Но эти действия уже не совсем то, для чего программа была предназначена, так как основное действие - отправка email программа сделать не сможет.
Очень часто то, исключительная ситуация или нет, зависит от языка программирования. Во многих языках, если вдруг произошло деление на ноль - это считается исключением (так как на ноль делить нельзя), но в JavaScript - не считается (в JavaScript на ноль делить можно).
📌 #instr || Фронтендщик | 14 |
| 10 | Например, у нас есть программа, которая должна спросить email пользователя. Если пользователь ввел email в некорректном формате - это не сбой. Это ожидаемая проблема и наша программа будет спрашивать у пользователя email столько раз, пока он не введет его корректно.
Пусть наша программа, которая спрашивает email, должна также отправить этот корректный email через интернет. При этом оказывается, что интернет не работает. Вот это уже проблема: программа никак не сможет отправить данные через интернет, если интернет не работает.
📌 #instr || Фронтендщик | 20 |
| 11 | На самом деле разница между сбоем и не сбоем весьма расплывчата. Событие, которое одна программа может трактовать как исключительную ситуацию, другая программа может трактовать как некую ошибку, с которой она может справится.
Критерий тут следующий: если при возникновении проблемы ваша программа может продолжать выполнять то, для чего она предназначена, то это не исключительная ситуация, а если не может - то да, это исключение.
📌 #instr || Фронтендщик | 23 |
| 12 | Все описанные ситуации имеют общую суть: происходит некий сбой, который приводит к невозможности или бессмысленности завершения запланированной операции.
Бывают также ситуации, в которой происходит некая ошибка, не являющаяся сбоем. Например, вы спрашиваете у пользователя его email, и он вводит email в некорректном формате. Понятно, что наша программа не может продолжить обрабатывать email, так как он не корректен. Но, тем не менее это - не исключительная ситуация. Наша программа может сама исправить ситуацию: она выведет сообщение об ошибке и пользователь повторит свой ввод.
📌 #instr || Фронтендщик | 24 |
| 13 |  Когда мы пишем наши программы, мы неявно рассчитываем на то, что все программно-технические механизмы, используемые нами, будут работать корректно.
Это, однако, не всегда так. При передаче данных по сети происходит обрыв связи и данные приходят к нам в некорректном виде, или вообще не приходят. При записи файла оказывается, что выделенное нам место на жестком диске закончилось, и файл не может записаться.
При чтении файла оказывается, что такого файла не существует и нам не откуда читать. При печати данных на принтере происходит обрыв кабеля, соединяющего принтер и компьютер.
📌 #instr || Фронтендщик | 24 |
| 14 | Введение в исключительные ситуации в JavaScript
Сейчас мы будем рассматривать исключительные ситуации в JavaScript. Для начала я сделаю некоторое введение, в котором будут примеры исключительных ситуаций вообще для любых языков программирования, а потом разберемся, как дело обстоит в JavaScript.
📌 #instr || Фронтендщик | 24 |
| 15 | Давайте переделаем регулярное выражение в строку. В этом случае у нас возникнет проблема с обратным слешем:
let reg = new RegExp('\w+');
// не работает
let res = str.match(reg);
Для решения проблемы удвоим обратный слеш:
let reg = new RegExp('\\w+');
// работает
let res = str.match(reg);
📌 #instr || Фронтендщик | 23 |
| 16 | Обратный слеш в строках регулярок в JavaScript
В строках с регулярками нужно экранировать (фактически удваивать) обратные слеши. Давайте посмотрим на примере.
Пусть у нас есть следующая строка:
let str = 'xyz';
Пусть у нас есть следующий код с регулярным выражением:
let reg = /\w+/;
let res = str.match(reg);
📌 #instr || Фронтендщик | 23 |
| 17 | ![Пусть к этой строке мы применяем следующее регулярное выражение с флагом: let reg = /[a-z]+/g; let res = str.match(reg); Дава](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo+AjIqgtObDoKrarYqMyP/L2u71////m8H////6/+b9//j/2wBDASstLTw1PHZBQXb4pYyl+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj/wAARCAAXACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwByqCo+7+OaQjj7mPegPgAYJx70GQkcZB+tagIi7jinEAN91tq9aj56jgjkVPhSGywJJ9amUuXUa1diJgMZU5HvRUlwR5m0EECinHVXCxFxj3ooopgKMZ56UwoGOSf06YoopNAOIXqPxooopgf/2Q==){kind=small} Пусть к этой строке мы применяем следующее регулярное выражение с флагом:
let reg = /[a-z]+/g;
let res = str.match(reg);
Давайте перепишем это регулярное выражение через RegExp:
let reg = new RegExp('[a-z]+',
'g');
let res = str.match(reg);
📌 #instr || Фронтендщик | 19 |
| 18 | Флаги для строк регулярок в JavaScript
Флаги в регулярках, созданных через RegExp, следует передавать вторым параметром. Давайте посмотрим на примере.
Пусть у нас есть следующая строка:
let str = 'abc def';
📌 #instr || Фронтендщик | 21 |
| 19 |  А теперь вставим переменную с помощью шаблонных строк:
let pat = 'png|jpg';
let reg = new RegExp(`\.(${pat})$`);
let res = str.match(reg);
А теперь сформируем часть регулярки из массива:
let exts = ['png', 'jpg'];
let pat = exts.join('|')
let reg = new RegExp(`\.(${pat})$`);
let res = str.match(reg);
📌 #instr || Фронтендщик | 25 |
| 20 | Давайте теперь вынесем часть регулярки в переменную и вставим ее с помощью конкатенации:
let pat = 'png|jpg';
let reg = new RegExp('\.('
+ pat + ')$');
let res = str.match(reg);
📌 #instr || Фронтендщик | 22 |
