جداکردن سه‌رقم سه‌رقم اعداد

15 بهمن 1398

این عدد را بخوانید: 5492870000002549222 ... صبر کنید! خیلی تلاش نکنید. در هنگام کار با اعداد به خصوص در بخش‌هایی مثل حسابداری و محیط‌هایی که «خوانایی اعداد» اهمیت زیادی دارد، نمایش ارقام به همراه جداکننده سه‌رقمی آن تاثیر بسزایی در عملکرد کاربر خواهد داشت. در این بخش از چند روش مختلف و در حالت‌های مختلف – که امکان دارد برای شما پیش آید – سعی می‌کنیم اعداد را به صورت سه‌رقم، سه‌رقم نمایش دهیم.

محیط PHP

در اولین گام و ساده‌ترین آن در محیط PHP با کمک تابع number_format به‌آسانی می‌توانیم از پس این کار طاقت فرسا بربیاییم!

ورودی تابع number_format فقط می‌تواند عدد باشد. در غیر این صورت با خطا مواجه می‌شوید. بنابراین بهتر است ورودی را قبل از این که به تابع فوق بدهید بررسی کنید که حتما عدد باشد یا خالی نباشد.

<?php
	$num = 1024069;
	if (is_numeric($num) == true) {
		$res = number_format($num);
		echo $res;
	
		//1,024,069 خروجی
	}
?>

آیا می‌توانیم در این تابع از اعداد فارسی استفاده کنیم؟ خیر اما با یک تابع ساده و کمکی می‌توانیم شکل نمایش اعداد لاتین را به فارسی برگردانیم

<?php
	header('Content-Type: text/html; charset=utf-8');
	$num = 1024069;
	if (is_numeric($num) == true) {
		$res = number_format($num);
		echo $res;
		echo number2fa($res);
	
		//1,024,069 خروجی
		//۱,۰۲۴,۰۶۹ خروجی
	}
	function number2fa($in) {
		$en_num = array("0","1","2","3","4","5","6","7","8","9");
		$fa_num = array("۰","۱","۲","۳","۴","۵","۶","۷","۸","۹");
		return str_replace($en_num,$fa_num,$in);
	}
?>

محیط جاوا اسکریپت

در محیط جاوااسکریپت تابعی مانند php وجود ندارد و باید خودمان آستین‌مان را بالا بزنیم. تابعی می‌نویسیم به نام js_number_format

تابع فوق می‌تواند عدد دلخواه ما را گرفته و به صورت سه‌رقم سه‌رقم نمایش دهد. با یک مثال این تابع را بررسی می‌کنیم

<html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
	var numb = 1234567890;
	$(function() { 
		$( document ).ready(function() {
			$("#div_number").html(js_number_format(numb));
		}); 
	}); 
 
	function js_number_format(num) {
		var str = num.toString();
		if (str && str.length > 3) {
			str = str.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
		}
		return str;
	}
 
</script>
<body>
<div id="div_number"></div>
</body>
</html>

شکل پر کاربرد دیگری را هم بررسی می‌کنیم. فرض کنید می‌خواهید از کاربر عدد دریافت کنید. این عدد می‌تواند قیمت خرید یک محصول یا هر مبلغ دیگری باشد. در این صورت باید همزمان که کاربر اعداد را وارد می‌کند به صورت خودکار کاراکتر «,» نیز درج شود. برای مثال لطفا در باکس زیر عددی لاتین را تایپ نمایید

همان‌طور که می‌بینید با تایپ اعداد در کادر فوق، کاراکتر جداکننده نیز در بین اعداد قرار می‌گیرد. کاری که باید انجام دهیم این است که تابعی بنویسیم مثلا با نام comma_digit که آن تابع با روی‌داد onKeyup در input مورد نظر ما فراخوانی شود

<html>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
function comma_digit(t)
{
	$(t).val(function(index, value) {
		return value
		.replace(/\./g, '000')
		.replace(/\D/g, '')
		.replace(/\B(?=(\d{3})+(?!\d))/g, ",") 
		;
	});
}
function show_input() {

	var price = $('#input_price').val().replace(/\,/g, '');
	alert(price);
}
</script>
<body>
	<input id="input_price" onKeyup="comma_digit(this)" type="text" />
	<button onClick="show_input()" >نمایش</button>
</body>

</html>

کاربرد جالب تابع فوق این است که علاوه بر جدا کردن سه رقمی ارقام، اجازه درج حروف را نمی‌دهد و همین طور هنگامی که «.» یا «نقطه» را درج می‌کنید «سه صفر» در انتهای عدد قرار می‌گیرد که این امکان در نرم‌افزارهایی مثل حسابداری و انبارداری بسیار پرکاربرد است در نهایت پس از نوشتن ارقام در داخل input می‌خواهیم از این عدد استفاده کنیم. پیش از آن باید کاما را از رشته اعداد خود حذف کنیم این عمل را با دستور replace(/\,/g, ”) انجام می‌دهیم. تابع show_input در مثال فوق کاما را از اعداد حذف می‌کند.

var price = $('#input_price').val().replace(/\,/g, '');