月度归档： 2025 年 2 月

在开发和金额有关的网站应用时，货币格式化是一个常见的需求。无论是电商网站的商品价格，还是财务系统的金额显示，我们都需要将数值以规范的货币格式呈现给用户。比如，将 1234567.89 格式化为 1,234,567.89，这样不仅更美观，也更容易阅读。

下面是一个简单而实用的 JavaScript 函数，可以帮助你轻松实现货币格式化。这个函数会将数值修约为两位小数，并添加千位分隔符，确保金额显示的规范性和一致性。

代码实现：

//language:js
// 格式化货币
function formatCurrency(value) {
    // 先将数值修约为两位小数
    let rounded = Math.round(value * 100) / 100;
    // 将数值转换为字符串
    let valueString = rounded.toString();
    
    // 检查是否有小数点
    let decimalPos = valueString.indexOf('.');
    // 如果没有小数点，添加".00"
    if (decimalPos === -1) {
        valueString += ".00";
    } else {
        // 否则, 确保小数部分至少有两位数字
        let decimalPart = valueString.substring(decimalPos + 1);
        if (decimalPart.length === 1) {
            // 如果只有一位小数, 添加一个0
            valueString += "0";
        }
    }
    
    // 添加千位分隔符
    let parts = valueString.split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    
    return parts.join(".");
}

代码解析

1. 修约数值：
   • 使用 Math.round(value * 100) / 100 将数值修约为两位小数。这样可以确保金额的精度符合货币显示的要求。
2. 处理小数部分：
   • 将数值转换为字符串后，检查是否存在小数点。
   • 如果没有小数点，直接添加 .00，确保金额始终显示两位小数。
   • 如果小数点后只有一位数字，则补一个 0，例如将 123.5 转换为 123.50。
3. 添加千位分隔符：
   • 使用正则表达式 /\B(?=(\d{3})+(?!\d))/g 在整数部分添加千位分隔符（逗号）。
   • 例如，将 1234567 转换为 1,234,567。
4. 拼接结果：
   • 最后将整数部分和小数部分拼接起来，返回格式化后的字符串。

使用示例：

console.log(formatCurrency(1234567.89)); // 输出: "1,234,567.89"
console.log(formatCurrency(1234.5));      // 输出: "1,234.50"
console.log(formatCurrency(1234));       // 输出: "1,234.00"

注意：

如果你需要更复杂的货币格式化功能（例如支持多国货币、自定义符号等），可以考虑使用现成的库，比如 Intl.NumberFormat，它提供了更强大的国际化支持。

在前端开发中，获取并显示当前时间是一个常见的需求。无论是用于展示网页的实时时间，还是记录用户操作的时间戳，JavaScript 都提供了简单而强大的工具来实现这一功能。下面我们将详细介绍如何使用 JavaScript 获取当前时间，并将其格式化为易于阅读的形式。

代码实现：

function getTime() {
	var now = new Date();

	var year = now.getFullYear();       //年
	var month = now.getMonth() + 1;     //月
	var day = now.getDate();            //日

	var hh = now.getHours();            //时
	var mm = now.getMinutes();          //分
	var ss = now.getSeconds();          //分
	document.getElementById('time').innerText = year + '年' + month + '月' + day + '日 ' + hh + '点' + mm + '分' + ss + '秒';
}

代码解析

1. 创建 Date 对象：
   • 使用 new Date() 创建一个 Date 对象，它会自动获取当前的系统时间。
2. 获取年、月、日：
   • getFullYear()：获取完整的年份（例如 2023）。
   • getMonth()：获取月份，注意返回值是 0 到 11，所以需要加 1。
   • getDate()：获取当前日期（1 到 31）。
3. 获取时、分、秒：
   • getHours()：获取当前小时（0 到 23）。
   • getMinutes()：获取当前分钟（0 到 59）。
   • getSeconds()：获取当前秒数（0 到 59）。
4. 格式化时间：
   • 将获取到的年、月、日、时、分、秒拼接成一个字符串，例如 2023年10月5日 14点30分45秒。
5. 显示时间：
   • 使用 document.getElementById('time').innerText 将格式化后的时间显示在页面上。

使用示例

假设你的 HTML 中有一个元素用于显示时间：

<div id="time"></div>

调用 getTime() 函数后，页面会显示类似以下内容：

2023年10月5日 14点30分45秒

动态更新时间

如果你希望时间能够动态更新（例如每秒刷新一次），可以使用 setInterval 函数：

// 每秒调用一次 getTime 函数
setInterval(getTime, 1000);

这样，页面上的时间就会每秒更新一次，实现实时显示效果。

扩展功能

1. 补零操作：
   • 如果希望时间格式更加统一（例如 14:05:09 而不是 14:5:9），可以对小时、分钟、秒进行补零操作：

function padZero(num) {
    return num < 10 ? '0' + num : num;
}

var hh = padZero(now.getHours());
var mm = padZero(now.getMinutes());
var ss = padZero(now.getSeconds());

2. 自定义格式：
   • 如果需要显示其他格式（例如 2023-10-05 14:30:45），可以调整拼接方式：

document.getElementById('time').innerText = 
    year + '-' + padZero(month) + '-' + padZero(day) + ' ' + hh + ':' + mm + ':' + ss;

3. 国际化支持：
   • 如果需要支持不同语言的时间格式，可以使用 toLocaleString() 方法：

var options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
document.getElementById('time').innerText = now.toLocaleString('zh-CN', options);

适用场景

• 网页时钟：在网页上显示实时时间。
• 表单时间戳：记录用户提交表单的时间。
• 日志记录：在控制台或日志中记录操作时间。
• 倒计时功能：结合时间计算实现倒计时效果。

注意事项

• 时区问题：new Date() 获取的是用户本地时间。如果需要显示 UTC 时间，可以使用 getUTC 系列方法。
• 性能优化：如果页面中有大量时间显示需求，建议将时间格式化逻辑封装成工具函数，避免重复代码。

在网页开发中，动态修改列表内容是很常见的需求。比如实时添加待办事项、展示动态加载的数据等。如果不想依赖 jQuery 这类第三方库，通过原生 JavaScript 也能轻松实现。下面通过基础代码和扩展案例，演示如何用纯 JS 操作 DOM 动态插入列表项。

基础实现代码

var li = document.createElement("li");
li.appendChild(document.createTextNode("li里的文字"));              
document.getElementById('ul_id').appendChild(li);

代码拆解

1. createElement
   创建 <li> 元素，类似准备一个空容器。
2. createTextNode + appendChild
   先创建文本节点再插入到 li，比直接写 innerHTML 更安全（避免 XSS 攻击风险）。
3. getElementById 定位父元素
   通过 ul 的 id 找到目标列表，用 appendChild 将 li 添加为最后一个子元素。

实际应用场景

<!-- 示例：点击按钮动态添加列表项 -->
<ul id="todoList">
  <li>第一项任务</li>
</ul>
<button onclick="addItem()">添加新任务</button>

<script>
function addItem() {
  var li = document.createElement("li");
  li.textContent = "新增任务" + Date.now(); // 更简洁的文本写入方式
  document.getElementById('todoList').appendChild(li);
}
</script>

在现代网页开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛应用于实现异步请求，以便无需重新加载页面即可更新内容。下面我们展示如何用纯 JavaScript 实现 AJAX 请求。

1. 基本的 AJAX 请求

//language:js
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

在这个例子中，我们创建了一个新的 XMLHttpRequest 对象，并通过 open 方法指定请求类型（GET）、请求的 URL（”ajax_info.txt”）以及是否异步（true）。当请求成功完成后，onload 事件会被触发，响应的内容会被显示在页面上的 demo 元素中。

2. 发送表单数据并响应

如果我们需要发送表单数据，可以使用 FormData 对象，它会自动处理表单中的所有数据。

//language:js
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
    let response = JSON.parse(this.responseText);
    if (response.code == 0) {
        alert('留言成功');
    } else {
        alert(response.msg);
    }                
}
xhttp.open("POST", "post-message.php", true);

var guestBookForm = document.getElementById("guestBookForm");
var formData = new FormData(guestBookForm);

xhttp.send(formData);

在这个例子中，我们发送一个 POST 请求到 post-message.php，并通过 FormData 对象封装了表单中的数据。当 PHP 处理完请求后，返回一个 JSON 格式的响应，JavaScript 会根据返回的 code 来判断留言是否成功。

3. PHP 处理代码

以下是对应的 PHP 处理代码：

//language:php
<?php
include 'db.php';

$guestName = $_POST['guestName'];
$message = $_POST['message'];

if (empty($guestName)) {
    echo json_encode(['code' => -1, 'msg' => '昵称不能为空']);
    exit();
}

if (empty($message)) {
    echo json_encode(['code' => -1, 'msg' => '留言内容不能为空']);
    exit();
}

// 进一步的处理，如存入数据库等
?>

在 PHP 端，我们检查了用户提交的 guestName 和 message 是否为空。如果为空，则返回相应的错误信息。

4. 自定义 FormData

如果需要手动构建 FormData，例如在动态生成数据时，可以这样做：

//language:js
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
    let response = JSON.parse(this.responseText);                                
}
xhttp.open("POST", "pay.php", true);

var formData = new FormData();
formData.append("id", id);
formData.append("unitPrice", unitPrice);
formData.append("count", P[i]);

xhttp.send(formData);

通过这种方式，你可以灵活地向服务器发送任何自定义的数据。

在 JavaScript 中，我们可以使用 hasOwnProperty 方法来判断某个对象是否拥有指定的属性。这个方法可以帮助我们区分对象本身的属性和从原型链继承的属性。

1. 使用 hasOwnProperty 方法

hasOwnProperty 是 Object.prototype 上的方法，它不会检查原型链，因此它是最可靠的方式来判断对象自身是否包含某个属性。

示例代码：

const obj = {
    name: "张三",
    age: 25
};

console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("age"));  // true
console.log(obj.hasOwnProperty("gender")); // false

2. in 运算符

in 运算符可以用于检查对象及其原型链上是否存在某个属性。

示例代码：

const obj = {
    name: "李四"
};

console.log("name" in obj);  // true
console.log("toString" in obj); // true，因为 `toString` 是 Object.prototype 上的方法

3. Object.hasOwn（ES2022 新增）

在 ES2022 中，JavaScript 引入了 Object.hasOwn，它是 hasOwnProperty 的更安全替代方法。

示例代码：

const obj = {
    city: "北京"
};

console.log(Object.hasOwn(obj, "city")); // true
console.log(Object.hasOwn(obj, "country")); // false

4. 何时使用哪种方法？

• hasOwnProperty：适用于检查对象自身是否拥有某个属性，避免检查原型链上的属性。
• in 运算符：如果想要检查某个属性是否存在于对象或其原型链上，可以使用 in。
• Object.hasOwn：如果环境支持 ES2022，建议使用 Object.hasOwn，因为它不会被 hasOwnProperty 可能被覆盖的问题影响。

5. 注意事项

如果某个对象的 hasOwnProperty 方法被覆盖，调用 Object.prototype.hasOwnProperty.call(obj, key) 仍然可以检查属性：

const obj = {
    hasOwnProperty: function() {
        return false;
    },
    id: 1001
};

console.log(obj.hasOwnProperty("id")); // false（被覆盖）
console.log(Object.prototype.hasOwnProperty.call(obj, "id")); // true

6. 结论

在 JavaScript 中，判断对象是否具有某个属性的方法有多种，通常推荐使用 hasOwnProperty 或 Object.hasOwn 进行安全检查。对于特殊情况，可以结合 in 运算符或者 Object.prototype.hasOwnProperty.call 来确保可靠性。

希望这篇文章对你有所帮助！

在实际开发中，我们经常需要将 JavaScript 数组的值提交到表单中。本文介绍如何将一个 JS 数组 selectedTextArray 赋值给表单中的隐藏字段，以便在提交时传输到服务器。

1. HTML 结构

我们使用一个 ID 为 form 的表单，并在 onclick 事件中调用 update() 方法来动态添加隐藏字段。

<form class="form-horizontal" id="form" action="/role-permission/update/{{ $role->id }}" method="post">
    @csrf
    <div class="box-body">                  
        <div class="form-group">
            <div class="col-sm-12">
                <div id="tree"></div>
            </div>
        </div>         
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary pull-right" onclick="return update();">保存</button>
    </div>
</form>

2. JavaScript 代码

在 update() 方法中，我们遍历 selectedTextArray 数组，并动态创建 input 隐藏字段，将其添加到表单中。

function update() {
    // 假设 selectedTextArray 是一个已有的数组
    let selectedTextArray = ["read", "write", "execute"]; // 示例数据
    
    let form = document.getElementById("form");
    
    // 清除已有的隐藏字段，避免重复提交
    document.querySelectorAll("input[name='permissions_array[]']").forEach(el => el.remove());
    
    // 遍历数组并创建隐藏字段
    for (let i = 0; i < selectedTextArray.length; i++) {
        let item = document.createElement("input");
        item.type = "hidden";
        item.name = "permissions_array[]";
        item.value = selectedTextArray[i];  
        form.appendChild(item);
    }

    return true; // 允许表单提交
}

3. 关键点解析

• item.name = "permissions_array[]"; 这一行代码的作用是确保数据以数组的形式提交到服务器。
• document.querySelectorAll("input[name='permissions_array[]']").forEach(el => el.remove()); 这行代码确保每次点击提交按钮时都会清除先前的隐藏字段，避免重复数据。
• 通过 appendChild(item); 将新创建的隐藏 input 字段添加到表单中。

4. 提交到服务器的示例数据

假设 selectedTextArray 包含 ["read", "write", "execute"]，提交后服务器接收到的数据格式如下：

{
    "permissions_array": ["read", "write", "execute"]
}

5. 结论

通过 JavaScript，我们可以动态地为表单添加隐藏字段，并将数组数据以正确的格式提交到服务器。这样可以方便地传输多选数据，如权限管理、标签选择等场景。