- Published on
Vài hàm helper hữu ích cho React
Bộ hàm helper này giúp quý vị viết React nhanh hơn và dễ dàng hơn.
- Authors
- Name
- Nguyen Pham
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.
jsx
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:
jsx
import { truncateString } from "@/utils/helpers";Trong phần render:
jsx
<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.
jsx
export const formatDate = (date: any) => {T12:00:00.000Z
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.
jsx
export const removeHTMLTags = (str: any) => {
return str.replace(/<[^>]*>/g, '')
}Format number
Hàm này giúp quý vị định dạng số.
jsx
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ệ.
jsx
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.
jsx
export const formatURL = (str: any) => {
return str.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '')
}
Nguyen Pham
Làm việc tại phòng thí nghiệm MADE, Texas, USA. Là một người đam mê với công nghệ và thích chia sẻ kiến thức với mọi người.
