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

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

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

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

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

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

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

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

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;
}

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

document.write(partition_numbers(9540000));

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

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

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;
}

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

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 ");
    }

Добавить комментарий для Marat Отменить ответ

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

Комментарии
  • Загрузка...
Друзья сайта