JavaScript 类型转换不是数字
JavaScript Type Conversion Not A Number
我有一个 div,其数据属性包含日期。当我检索所述数据值时,它不是日期,而是字符串:
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
<span>some stuff in here</span>
</div>
我正在像这样检索数据元素:
var currentDateString = $(this).data('expense-date');
然后我尝试将该值拆分为一个字符串数组:
var currentDateArray = currentDateString.split("/");
然后我将数组的一部分分配为我要创建的日期的变量:
var year = Number(currentDateArray[2].toString());
var month = Number(currentDateArray[0].toString());
var day = Number(currentDateArray[1].toString());
有趣的是,我的三个变量都表示它们是 NaN。因此,我的新 Date 变量的声明是 "Invalid Date":
var currentDate = new Date(year, month - 1, day);
我可以执行以下操作并且效果很好:
var dateString = "5/3/2016";
var dateStringArray = dateString.split("/");
var testDate = new Date(dateStringArray[2], dateStringArray[0] - 1, dateStringArray[1]);
只有当我从 div 元素读取数据属性时才将值设置为我不知道它是什么的东西。
我正在 Visual Studio 中调试,这是我的即时 Window 尝试测试值的屏幕截图:
这是完整的例子...我的 HTML:
<div class="col-md-6" id="detailPreview">
<div class="panel panel-transparent" data-expense-date="5/2/2016">
<div class="panel-heading">
<h3 class="panel-title">Monday, May 2, 2016</h3>
<div class="panel-actions">
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
</div>
</div>
<div class="panel-body expense-date-body">
<div class="panel" data-expense-detail-id="5e18bb2b-4671-490d-8769-5d3ea08134d8">
<div class="panel-heading">
<h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Best Buy (ASUS Z555RA-3)</h3>
<div class="panel-actions">
<a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
<a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
</div>
</div>
<!-- <div class="panel-collapse"> -->
<div class="panel-body">
Business Name: Best Buy
Location: Topeka, KS
Purpose: Purchased replacement laptop for inventory
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="panel panel-transparent" data-expense-date="5/3/2016">
<div class="panel-heading">
<h3 class="panel-title">Tuesday, May 3, 2016</h3>
<div class="panel-actions">
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
</div>
</div>
<div class="panel-body expense-date-body">
<div class="panel" data-expense-detail-id="49de85e2-b3ef-465d-8a61-cbc298b99d34">
<div class="panel-heading">
<h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Wal-Mart (Scotch Tape)</h3>
<div class="panel-actions">
<a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
<a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
</div>
</div>
<!-- <div class="panel-collapse"> -->
<div class="panel-body">
Business Name: Wal-Mart
Location: Topeka, KS
Purpose: Purchased scotch tape
</div>
<!-- </div> -->
</div>
</div>
</div>
</div>
我的javascript:
$("[data-expense-date]").each(function () {
if ($(this).data('expense-date') === dateShort.toString()) {
parentDiv = $(this);
return false;
} else {
debugger;
// determine if this date is before or after the param date.
//var dataExpenseDate = $(this).data('expense-date');
var currentDateString = $(this).data('expense-date'); // "5/2/2016"
var currentDateArray = currentDateString.split('/'); // [5,2,2016]
//var yearString = currentDateArray[2];
//var yearNumber = Number(yearString);
var year = Number(currentDateArray[2]); // "2016" <-- NaN
var month = Number(currentDateArray[0]); // "5" <-- NaN
var day = Number(currentDateArray[1]); // "3" <-- NaN
var currentDate = new Date(year, month - 1, day); // Invalid Date
if (date > currentDate) {
newDivInjectAfter = $(this);
}
}
});
更新:
这仅在我使用 Internet Explorer (11) 时发生。 Edge、Opera、FireFox 和 Chrome,都正确地解析了这些值。感谢大家的回复,但我相信我发现了 IE 的一个错误。
使用 $('#firstRow').attr('data-expense-date')
选择器获取 data-expense-date
属性。
$(function() {
var
currentDateString = $('#firstRow').attr('data-expense-date'),
currentDateArray = currentDateString.split('/'), // ['5', '3', '2016']
year = +currentDateArray[2].toString(), // 2016
month = +currentDateArray[0].toString(), // 5
day = +currentDateArray[1].toString(), // 3
currentDate = new Date(year, month - 1, day);
alert(currentDate); // Date {Tue May 03 2016 00:00:00 GMT+0500 (AZST)}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
<span>some stuff in here</span>
</div>
就像有人在评论中所说的那样,我认为 this
可能是错误的。
只是几个笔记。
.toString()
根本不需要,因为属性是字符串,您也不需要给 Date
一个 Number
。只需将它们作为字符串输入即可。您也可以摆脱所有变量。
var currentDateArray = $('#firstRow').attr('data-expense-date').split('/');
alert(new Date(currentDateArray[2], currentDateArray[1], --currentDateArray[0]));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
<span>some stuff in here</span>
</div>
或(非传统方法)
var currentDateArray = $('#firstRow').attr('data-expense-date').split('/');
currentDateArray[0] --; // day -1;
currentDateArray.push(null);
alert(new(Date.bind.apply(Date, currentDateArray.reverse()))());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
<span>some stuff in here</span>
</div>
更新:
我试图找到 IE11 错误,但无法重现它。这段代码对我有用。刚刚意识到您使用的是美国日期格式,而我的其他两个示例使用的是英国日期格式,因此它们需要修改。
var parentDiv;
var date = new Date();
var dateShort = date.toLocaleDateString();
$("[data-expense-date]").each(function() {
if ($(this).data('expense-date') === dateShort) {
parentDiv = $(this);
return false;
} else {
var currentDateString = $(this).data('expense-date'); // "5/2/2016"
var currentDateArray = currentDateString.split('/'); // [5,2,2016]
var year = Number(currentDateArray[2]); // "2016" <-- NaN
var month = Number(currentDateArray[0]); // "5" <-- NaN
var day = Number(currentDateArray[1]); // "3" <-- NaN
var currentDate = new Date(year, month - 1, day); // Invalid Date
console.log(day,month,year,currentDate);
if (date > currentDate) {
newDivInjectAfter = $(this);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6" id="detailPreview">
<div class="panel panel-transparent" data-expense-date="5/2/2016">
<div class="panel-heading">
<h3 class="panel-title">Monday, May 2, 2016</h3>
<div class="panel-actions">
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
</div>
</div>
<div class="panel-body expense-date-body">
<div class="panel" data-expense-detail-id="5e18bb2b-4671-490d-8769-5d3ea08134d8">
<div class="panel-heading">
<h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Best Buy (ASUS Z555RA-3)</h3>
<div class="panel-actions">
<a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
<a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
</div>
</div>
<!-- <div class="panel-collapse"> -->
<div class="panel-body">
Business Name: Best Buy Location: Topeka, KS Purpose: Purchased replacement laptop for inventory
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="panel panel-transparent" data-expense-date="5/3/2016">
<div class="panel-heading">
<h3 class="panel-title">Tuesday, May 3, 2016</h3>
<div class="panel-actions">
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
</div>
</div>
<div class="panel-body expense-date-body">
<div class="panel" data-expense-detail-id="49de85e2-b3ef-465d-8a61-cbc298b99d34">
<div class="panel-heading">
<h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Wal-Mart (Scotch Tape)</h3>
<div class="panel-actions">
<a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
<a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
</div>
</div>
<!-- <div class="panel-collapse"> -->
<div class="panel-body">
Business Name: Wal-Mart Location: Topeka, KS Purpose: Purchased scotch tape
</div>
<!-- </div> -->
</div>
</div>
</div>
</div>
搜索我的问题并将 Internet Explorer 添加到搜索后,我在这里找到了答案。它似乎已使用 RegEx 解决:
我有一个 div,其数据属性包含日期。当我检索所述数据值时,它不是日期,而是字符串:
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
<span>some stuff in here</span>
</div>
我正在像这样检索数据元素:
var currentDateString = $(this).data('expense-date');
然后我尝试将该值拆分为一个字符串数组:
var currentDateArray = currentDateString.split("/");
然后我将数组的一部分分配为我要创建的日期的变量:
var year = Number(currentDateArray[2].toString());
var month = Number(currentDateArray[0].toString());
var day = Number(currentDateArray[1].toString());
有趣的是,我的三个变量都表示它们是 NaN。因此,我的新 Date 变量的声明是 "Invalid Date":
var currentDate = new Date(year, month - 1, day);
我可以执行以下操作并且效果很好:
var dateString = "5/3/2016";
var dateStringArray = dateString.split("/");
var testDate = new Date(dateStringArray[2], dateStringArray[0] - 1, dateStringArray[1]);
只有当我从 div 元素读取数据属性时才将值设置为我不知道它是什么的东西。
我正在 Visual Studio 中调试,这是我的即时 Window 尝试测试值的屏幕截图:
这是完整的例子...我的 HTML:
<div class="col-md-6" id="detailPreview">
<div class="panel panel-transparent" data-expense-date="5/2/2016">
<div class="panel-heading">
<h3 class="panel-title">Monday, May 2, 2016</h3>
<div class="panel-actions">
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
</div>
</div>
<div class="panel-body expense-date-body">
<div class="panel" data-expense-detail-id="5e18bb2b-4671-490d-8769-5d3ea08134d8">
<div class="panel-heading">
<h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Best Buy (ASUS Z555RA-3)</h3>
<div class="panel-actions">
<a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
<a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
</div>
</div>
<!-- <div class="panel-collapse"> -->
<div class="panel-body">
Business Name: Best Buy
Location: Topeka, KS
Purpose: Purchased replacement laptop for inventory
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="panel panel-transparent" data-expense-date="5/3/2016">
<div class="panel-heading">
<h3 class="panel-title">Tuesday, May 3, 2016</h3>
<div class="panel-actions">
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
</div>
</div>
<div class="panel-body expense-date-body">
<div class="panel" data-expense-detail-id="49de85e2-b3ef-465d-8a61-cbc298b99d34">
<div class="panel-heading">
<h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Wal-Mart (Scotch Tape)</h3>
<div class="panel-actions">
<a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
<a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
</div>
</div>
<!-- <div class="panel-collapse"> -->
<div class="panel-body">
Business Name: Wal-Mart
Location: Topeka, KS
Purpose: Purchased scotch tape
</div>
<!-- </div> -->
</div>
</div>
</div>
</div>
我的javascript:
$("[data-expense-date]").each(function () {
if ($(this).data('expense-date') === dateShort.toString()) {
parentDiv = $(this);
return false;
} else {
debugger;
// determine if this date is before or after the param date.
//var dataExpenseDate = $(this).data('expense-date');
var currentDateString = $(this).data('expense-date'); // "5/2/2016"
var currentDateArray = currentDateString.split('/'); // [5,2,2016]
//var yearString = currentDateArray[2];
//var yearNumber = Number(yearString);
var year = Number(currentDateArray[2]); // "2016" <-- NaN
var month = Number(currentDateArray[0]); // "5" <-- NaN
var day = Number(currentDateArray[1]); // "3" <-- NaN
var currentDate = new Date(year, month - 1, day); // Invalid Date
if (date > currentDate) {
newDivInjectAfter = $(this);
}
}
});
更新:
这仅在我使用 Internet Explorer (11) 时发生。 Edge、Opera、FireFox 和 Chrome,都正确地解析了这些值。感谢大家的回复,但我相信我发现了 IE 的一个错误。
使用 $('#firstRow').attr('data-expense-date')
选择器获取 data-expense-date
属性。
$(function() {
var
currentDateString = $('#firstRow').attr('data-expense-date'),
currentDateArray = currentDateString.split('/'), // ['5', '3', '2016']
year = +currentDateArray[2].toString(), // 2016
month = +currentDateArray[0].toString(), // 5
day = +currentDateArray[1].toString(), // 3
currentDate = new Date(year, month - 1, day);
alert(currentDate); // Date {Tue May 03 2016 00:00:00 GMT+0500 (AZST)}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
<span>some stuff in here</span>
</div>
就像有人在评论中所说的那样,我认为 this
可能是错误的。
只是几个笔记。
.toString()
根本不需要,因为属性是字符串,您也不需要给 Date
一个 Number
。只需将它们作为字符串输入即可。您也可以摆脱所有变量。
var currentDateArray = $('#firstRow').attr('data-expense-date').split('/');
alert(new Date(currentDateArray[2], currentDateArray[1], --currentDateArray[0]));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
<span>some stuff in here</span>
</div>
或(非传统方法)
var currentDateArray = $('#firstRow').attr('data-expense-date').split('/');
currentDateArray[0] --; // day -1;
currentDateArray.push(null);
alert(new(Date.bind.apply(Date, currentDateArray.reverse()))());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstRow" class="form-group" data-expense-date="5/3/2016">
<span>some stuff in here</span>
</div>
更新: 我试图找到 IE11 错误,但无法重现它。这段代码对我有用。刚刚意识到您使用的是美国日期格式,而我的其他两个示例使用的是英国日期格式,因此它们需要修改。
var parentDiv;
var date = new Date();
var dateShort = date.toLocaleDateString();
$("[data-expense-date]").each(function() {
if ($(this).data('expense-date') === dateShort) {
parentDiv = $(this);
return false;
} else {
var currentDateString = $(this).data('expense-date'); // "5/2/2016"
var currentDateArray = currentDateString.split('/'); // [5,2,2016]
var year = Number(currentDateArray[2]); // "2016" <-- NaN
var month = Number(currentDateArray[0]); // "5" <-- NaN
var day = Number(currentDateArray[1]); // "3" <-- NaN
var currentDate = new Date(year, month - 1, day); // Invalid Date
console.log(day,month,year,currentDate);
if (date > currentDate) {
newDivInjectAfter = $(this);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6" id="detailPreview">
<div class="panel panel-transparent" data-expense-date="5/2/2016">
<div class="panel-heading">
<h3 class="panel-title">Monday, May 2, 2016</h3>
<div class="panel-actions">
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
</div>
</div>
<div class="panel-body expense-date-body">
<div class="panel" data-expense-detail-id="5e18bb2b-4671-490d-8769-5d3ea08134d8">
<div class="panel-heading">
<h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Best Buy (ASUS Z555RA-3)</h3>
<div class="panel-actions">
<a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
<a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
</div>
</div>
<!-- <div class="panel-collapse"> -->
<div class="panel-body">
Business Name: Best Buy Location: Topeka, KS Purpose: Purchased replacement laptop for inventory
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="panel panel-transparent" data-expense-date="5/3/2016">
<div class="panel-heading">
<h3 class="panel-title">Tuesday, May 3, 2016</h3>
<div class="panel-actions">
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="true" aria-hidden="true"></a>
</div>
</div>
<div class="panel-body expense-date-body">
<div class="panel" data-expense-detail-id="49de85e2-b3ef-465d-8a61-cbc298b99d34">
<div class="panel-heading">
<h3 class="panel-title"><i class="icon wb-payment" aria-hidden="true"></i>Expense: Wal-Mart (Scotch Tape)</h3>
<div class="panel-actions">
<a class="panel-action panel-action-edit icon wb-settings" aria-hidden="true"></a>
<a class="panel-action icon wb-minus" data-toggle="panel-collapse" aria-expanded="false" aria-hidden="true"></a>
<a class="panel-action icon wb-close" data-toggle="panel-close" aria-hidden="true"></a>
</div>
</div>
<!-- <div class="panel-collapse"> -->
<div class="panel-body">
Business Name: Wal-Mart Location: Topeka, KS Purpose: Purchased scotch tape
</div>
<!-- </div> -->
</div>
</div>
</div>
</div>
搜索我的问题并将 Internet Explorer 添加到搜索后,我在这里找到了答案。它似乎已使用 RegEx 解决: