Skip to main content

Comma Formatting

The comma formatting utilities help you add or remove thousands separators in numeric values for better readability.

Available Functions

Add Commas

addCommas() - Add thousands separators

Remove Commas

removeCommas() - Remove thousands separators

Basic Usage

import { addCommas, removeCommas } from '@persian-tools/persian-tools';

Adding Commas

Format numbers with thousands separators for improved readability:
addCommas(1234); // "1,234"
addCommas(1234567); // "1,234,567"
addCommas(1234567890); // "1,234,567,890"

With Decimal Places

addCommas(1234.56); // "1,234.56"
addCommas(9876543.21); // "9,876,543.21"
addCommas(1000.0); // "1,000"

String Input

addCommas("1234567"); // "1,234,567"
addCommas("9876.543"); // "9,876.543"

Removing Commas

Remove existing thousands separators from formatted numbers:
removeCommas("1,234,567"); // 1234567
removeCommas("9,876,543.21"); // 9876543.21
removeCommas("1,000"); // 1000

String Output Option

removeCommas("1,234,567", { returnString: true }); // "1234567"
removeCommas("9,876.54", { returnString: true }); // "9876.54"

Advanced Examples

Form Input Processing

function processNumberInput(input: string) {
	// Remove existing commas for calculation
	const numericValue = removeCommas(input);

	// Add commas for display
	const displayValue = addCommas(numericValue);

	return {
		numeric: numericValue,
		formatted: displayValue,
		isValid: !isNaN(numericValue),
	};
}

processNumberInput("1,234,567");
// { numeric: 1234567, formatted: "1,234,567", isValid: true }

Currency Formatting

function formatCurrency(amount: number, currency = "تومان") {
	const formatted = addCommas(amount);
	const persian = digitsEnToFa(formatted);
	return `${persian} ${currency}`;
}

formatCurrency(1250000); // "۱,۲۵۰,۰۰۰ تومان"
formatCurrency(999999, "ریال"); // "۹۹۹,۹۹۹ ریال"

Batch Processing

const numbers = [1234, 56789, 123456789];

const formatted = numbers.map((num) => ({
	original: num,
	withCommas: addCommas(num),
	persian: digitsEnToFa(addCommas(num)),
}));

// Results:
// [
//   { original: 1234, withCommas: "1,234", persian: "۱,۲۳۴" },
//   { original: 56789, withCommas: "56,789", persian: "۵۶,۷۸۹" },
//   { original: 123456789, withCommas: "123,456,789", persian: "۱۲۳,۴۵۶,۷۸۹" }
// ]

Edge Cases

Invalid Input Handling

addCommas(null); // ""
addCommas(undefined); // ""
addCommas(NaN); // ""
addCommas("invalid"); // ""

removeCommas(""); // 0
removeCommas("abc"); // NaN
removeCommas(null); // 0

Already Formatted Numbers

addCommas("1,234,567"); // "1,234,567" (no change)
removeCommas(1234567); // 1234567 (no change)

Negative Numbers

addCommas(-1234567); // "-1,234,567"
removeCommas("-1,234,567"); // -1234567

Very Large Numbers

addCommas(123456789012345); // "123,456,789,012,345"
addCommas(1e15); // "1,000,000,000,000,000"

TypeScript Support

import { addCommas, removeCommas } from "persian-tools";

// Type-safe usage
const formatted: string = addCommas(1234567);
const numeric: number = removeCommas("1,234,567");

// With options
interface RemoveCommasOptions {
	returnString?: boolean;
}

const result: string = removeCommas("1,234", { returnString: true });

Performance Considerations

  • Small numbers (< 1M): ~0.1ms
  • Large numbers (> 1B): ~0.2ms
  • String processing: ~0.15ms average
  • Batch operations: Linear scaling
  • Cache results for frequently used values
  • Use number input when possible (faster than string)
  • Consider memoization for repeated operations

Real-world Use Cases

Invoice Generation

interface InvoiceItem {
	description: string;
	quantity: number;
	unitPrice: number;
	total: number;
}

function formatInvoiceItem(item: InvoiceItem) {
	return {
		...item,
		formattedUnitPrice: addCommas(item.unitPrice),
		formattedTotal: addCommas(item.total),
		persianTotal: digitsEnToFa(addCommas(item.total)),
	};
}

Financial Dashboard

function createFinancialSummary(data: number[]) {
	const total = data.reduce((sum, val) => sum + removeCommas(val.toString()), 0);

	return {
		rawTotal: total,
		formattedTotal: addCommas(total),
		persianTotal: digitsEnToFa(addCommas(total)),
		items: data.map((val) => addCommas(val)),
	};
}

Form Validation

function validateNumberInput(input: string) {
	const cleaned = removeCommas(input);

	return {
		isValid: !isNaN(cleaned) && cleaned > 0,
		numericValue: cleaned,
		formattedValue: addCommas(cleaned),
		errorMessage: isNaN(cleaned) ? "عدد معتبر وارد کنید" : null,
	};
}

Integration Patterns

React Component

function NumberInput({ value, onChange }: { value: number; onChange: (val: number) => void }) {
  const [displayValue, setDisplayValue] = useState(addCommas(value));

  const handleChange = (input: string) => {
    const numeric = removeCommas(input);
    if (!isNaN(numeric)) {
      onChange(numeric);
      setDisplayValue(addCommas(numeric));
    }
  };

  return (
    <input
      value={displayValue}
      onChange={e => handleChange(e.target.value)}
      placeholder="مبلغ را وارد کنید"
    />
  );
}

Data Processing Pipeline

const numberProcessor = {
	parse: (input: string) => removeCommas(input),
	format: (num: number) => addCommas(num),
	localize: (num: number) => digitsEnToFa(addCommas(num)),

	pipeline: (input: string) => {
		const parsed = numberProcessor.parse(input);
		const formatted = numberProcessor.format(parsed);
		const localized = numberProcessor.localize(parsed);

		return { parsed, formatted, localized };
	},
};