NAPTheDev's Blog

10 đoạn code Javascript hữu ích

May 20, 2022

Javascript

Những utility function cực kì hữu ích cho project của bạn

1. Force download file

Tải file với thẻ a. Không hoạt động nếu file được trả về không có header "Content-Disposition: attachment"


const forceDownloadFile = (url) => {
const anchor = document.createElement("a");
anchor.href = url;
anchor.download = url;
anchor.style.display = "none";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
};

2. Sao chép văn bản

Copy bất kì văn bản nào vào bàn phím, hỗ trợ cả IE11.


const copyToClipboard = (text) => {
try {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text);
} else {
let textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
document.execCommand("copy") ? res() : rej();
textArea.remove();
});
}
} catch (error) {
console.error(error);
}
};

3. Sao chép ảnh

Chỉ hỗ trợ ảnh với mime type là "image/png"

utils.js
index.html
script.js
Copy

const copyImageToClipboard = async (imageElement) => {
let canvas = document.createElement("canvas");
canvas.width = imageElement.width;
canvas.height = imageElement.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(imageElement, 0, 0);
const dataURL = canvas.toDataURL();
const blob = await (await fetch(dataURL)).blob();
navigator.clipboard.write([
new ClipboardItem({
"image/png": blob,
}),
]);
};

Những browser được hỗ trợ

Supported ClipboardItem

4. Tính khoảng thời gian đã qua

utils.js
script.js
Copy

const calculateElapsedTime = (timeCreated) => {
const created = new Date(timeCreated).getTime();
let periods = {
year: 365 * 30 * 24 * 60 * 60 * 1000,
month: 30 * 24 * 60 * 60 * 1000,
week: 7 * 24 * 60 * 60 * 1000,
day: 24 * 60 * 60 * 1000,
hour: 60 * 60 * 1000,
minute: 60 * 1000,
};
let diff = Date.now() - created;
for (const key in periods) {
if (diff >= periods[key]) {
let result = Math.floor(diff / periods[key]);
return `${result} ${result === 1 ? key : key + "s"} ago`;
}
}
return "Just now";
};

5. CSS hex color ngẫu nhiên


const randomColor = () =>
`#${Math.floor(Math.random() * 0xffffff).toString(16)}`;

6. Định dạng số

utils.js
script.js
Copy

const formatNumber = (num) => {
return Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 1,
}).format(num);
};

7. Thay thế tất cả các ký tự trong chuỗi


let str = "ababaa";
// Replace "b" with ""
// Output "aaaa"
// Regex
str.replace(/b/g, "");
// Better regex
str.replace(new RegExp("b", "g"), "");
// Split and join
str.split("b").join("");
// Replace All (modern browser)
str.replaceAll("b", "");
// While loop
while (str.includes("b")) str = str.replace("b", "");

8. Flatten deep array


// Dùng đệ quy
const flatten = (arr) =>
arr.reduce(
(acc, current) =>
acc.concat(Array.isArray(current) ? flatten(current) : current),
[]
);
// Dùng Array.flat (không support IE)
const flatten = (arr) => arr.flat(Infinity);

9. Format video time

utils.js
script.js
Copy

const formatVideoTime = (seconds) => {
try {
const date = new Date(0);
date.setSeconds(seconds);
const time = date.toISOString().slice(11, 19);
const result = time.startsWith("00:0")
? time.slice(4)
: time.startsWith("00")
? time.slice(3)
: time.length === 8 && time.startsWith("0")
? time.slice(1)
: time;
return result;
} catch (error) {
return "0:00";
}
};

10. Format file size

utils.js
script.js
Copy

const formatFileSize = (size) => {
let i = Math.floor(Math.log(size) / Math.log(1024));
return `${(size / Math.pow(1024, i)).toFixed(1)} ${
["B", "KB", "MB", "GB", "TB"][i]
}`;
};

Kết luận

Và đó là 10 code snippets, utility functions rất hữu ích mà bạn có thể áp dụng vào project của mình.

Bình luận

Bài viết liên quan

Await một class trong javascript?

Ép kiểu ngầm trong javascript

Error Boundaries trong React

Path mapping trong React

NAPTheDev • © 2022 • My Portfolio