Сколько времени читается статья?

Очень интересная фишка в блогах и на других текстовых сайтах — указывать рядом со статьёй время её чтения. Видели что-то подобное: “Время чтения: менее 5 минут”?

Если не видели, то посмотрите в шапку статьи — там как раз реализован похожий пример

Реализовать это максимально просто, для этого нужно два вводных параметра:

• количество символов в статье
• количество картинок в статье

В среднем, взрослый человек может прочитать за 1 минуту 1500 символов, а каждую картинку просмотреть за 12 секунд. Из этих параметров не сложно получить время прочтения в секундах:

typescript
1const CHARACTERS_PER_MINUTE = 1500;
2const SECONDS_PER_IMAGE = 12;
3const SECONDS_IN_MINUTE = 60;
4
5const calculateReadingTimeInSeconds = (articleLength: number, numberOfImages = 0) => {
6    const charactersReadingTime = 
7      articleLength / CHARACTERS_PER_MINUTE * SECONDS_IN_MINUTE;
8    const imagesReadingTime = numberOfImages * SECONDS_PER_IMAGE;
9
10    const readingTime = Math.ceil(charactersReadingTime + imagesReadingTime);
11
12    return readingTime;
13}
14

А далее секунды можно легко форматировать в читаемый промежуток времени через конструкцию switch (true), например, вот так:

typescript
1const formatReadingTime = (seconds: number) => {
2    switch (true) {
3        case seconds < SECONDS_IN_MINUTE:
4            return "Менее 1 минуты"
5        case seconds < SECONDS_IN_MINUTE * 5:
6            return "Менее 5 минут"
7        case seconds >= SECONDS_IN_MINUTE * 5:
8            return "Более 5 минут"
9        default:
10            return null
11    }
12}
13

Кода получается совсем не много, зато мы сильно улучшаем UX