Vài hàm helper hữu ích cho React

Tổng quan

Dưới đây là một số hàm helper hữu ích cho React:

Truncate string

Hàm này giúp quý vị cắt chuỗi văn bản dài thành chuỗi ngắn hơn.

export const truncateString = (str: any, num: any) => {
	if (str.length <= num) {
		return str
	}
	// Clear & remove last word
	const newStr = str.slice(0, num + 1).trim()
	// Clear & remove last comma
	const lastSpace = newStr.lastIndexOf(' ')
	if (lastSpace === -1) {
		return `${newStr}...`
	}
	return `${newStr.slice(0, lastSpace)}...`
}

Để sử dụng hàm này, quý vị có thể gọi nó như sau:

import { truncateString } from "@/utils/helpers";

Trong phần render:

<div dangerouslySetInnerHTML={{ __html: truncateString(data.content, 200) }} />

Ý nghĩa của đoạn mã trên là cắt chuỗi data.content và chỉ lấy 200 ký tự đầu tiên.

Format date

Hàm này giúp quý vị định dạng ngày tháng.

export const formatDate = (date: any) => {
    const options = { year: 'numeric', month: 'long', day: 'numeric' }
    return new Date(date).toLocaleDateString('vi-VN', options)
}

Remove HTML tags

Hàm này giúp quý vị xóa các thẻ HTML ra khỏi chuỗi văn bản.

export const removeHTMLTags = (str: any) => {
    return str.replace(/<[^>]*>/g, '')
}

Format number

Hàm này giúp quý vị định dạng số.

export const formatNumber = (num: any) => {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

Format currency

Hàm này giúp quý vị định dạng tiền tệ.

export const formatCurrency = (num: any) => {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') + ' đ'
}

Format URL

Hàm này giúp quý vị định dạng URL.

export const formatURL = (str: any) => {
    return str.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '')
}