О web-разработке
и даже немного больше...

Разбиение цифровых значений, для удобного визуального восприятия

Мозг человека это один из загадочных даров природы, над которым уже много лет работают ученные, пытаясь узнать больше о принципах его работы. Благодаря ученным стало известно, что для восприятия информации у человека существуют несколько каналов: визуальный (60%), аудиальный (30%), смысловой (10%). Визуальное восприятие у здорового человека преимущественно преобладает над другими каналами. Наши глаза в этом случае играют главную роль.

В сайтостроении можно выделить отдельную область как науку, которая занимается изучением более продуктивных техник передачи информации пользователям сайта, в кругу просвещенных это определение трактуется как «юзабилити». Тема «юзабилизи» весьма широка, и в данной статье мы поговорим о числах, точнее об одном интересном способе их предоставления конечному пользователю.

Способ визуальной передачи информации для человека, а конкретнее, для комфортного восприятия чисел человеком играют немаловажную роль. Особенно это важно для различных торговых площадок, интернет-магазинов и т.д.

Иногда большие числа следует разделять пробелом, это позволит глазам человека быстрее прочитать значение величины.

Для примера приведу два способа представления величин,
первый – 1990132, второй — 1 990 132.
Можно заметить, что, второй способ читается легче. Числовые значения могут символизировать цены, количество, или любую другую информацию, предназначенную для визуального понимания величины.
Привести значение числа к такому виду несложно, это можно сделать как на стороне браузера пользователя, так и на стороне сервера. Мы рассмотрим примеры функций для обоих вариантов.

Первый вариант, это функция на javascript:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
function partition_numbers(number){
number = number + '';
numLen = number.length;
 
if (numLen> 3){
    i = numLen;
    strNum = '';
    three = 0;
    while (i != 0){
        i--;
        three++;
        if (three == 3){
            strNum = (i != 0 ? " " : '') + number[i] + strNum;
            three = 0;
        } else strNum = number[i] + strNum;
    }
    number = strNum;
}
return number;
}

Пробуем передать некую величину этой функции:

1
document.write(partition_numbers(9540000));

На выходе получаем:
9 540 000

Итак, получилось, теперь пробуем проделать это дело на стороне сервера. Для этого мы воспользуемся несложной функцией на PHP.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
function partition_numbers($number){
  
$number = (string)($number);
$numLen = strlen($number);
  
if ($numLen > 3){
    $i = $numLen;
    $strNum = '';
    $three = 0;
    while ($i != 0){
        $i--;
        $three++;
        if ($three == 3){
            $strNum = ($i != 0 ? " " : '').$number[$i].$strNum;
            $three = 0;
        } else $strNum = $number[$i].$strNum;
    }
    $number = $strNum;
}
return $number;
}

Обращаемся к функции:

1
echo partition_numbers(8450990);

На выходе получаем:
8 450 990

Сработало, функция возвратила результат в нужном виде. Код функции, описанный выше, приведен для демонстрации, однако при желании вы можете свободно использовать их в своих проектах, он работоспособен.

Обратите внимание, что в функции нет проверки входного параметра на принадлежность к числовому типу, в виду её не математического целевого назначения, иными словами, для визуального представления. Это позволяет передавать числовые значения любой длины, после чего они преобразуются в строковый тип.

Опубликован: 18.09.2013 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

Комментарии

  1. Marat пишет:

    Не стоит так извращаться, все гораздо проще:

    function partition_numbers(number){
    return number.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ");
    }

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *