本文整理了一系列JavaScript实用方法，包括点击返回无历史页时自动跳转首页的实现、简化调试信息的便捷Log封装、利用HTML5 Geolocation结合百度API获取移动端定位、从复杂DOM中提取数值的正则方法，以及设备信息判断和字符串扩展工具。
本文分享了一些在实际开发中较为实用的JavaScript方法，供读者参考与指正。原本计划分篇介绍，但考虑到内容不多，便整合在一起发布。其中部分方法源自网络，经个人验证认为具有较高实用价值，特此汇总供交流探讨。
返回无历史页面时跳转首页
1、点击返回若无历史页面则跳转至指定页面
该功能的背景源于客户需求：在单个微信分享页面中，用户点击返回按钮时应直接跳转至网站首页。
在开发过程中曾与客户讨论，是否可以在页面中添加一个回到首页的按钮。
然而，这种方式无法覆盖所有页面，且指定的分享页面空间有限，难以在不影响美观的前提下放置图标。因此，不得不寻求其他解决方案。
经过尝试，找到了以下代码实现方式：
//返回之前没页面则返回首页
function pushHistory() {
//获取浏览器历史记录栈中的记录个数
//由于页面加载的时候就会将当前页面压入栈中 所以判断是否小于2
if (history.length < 2) {
var state = {
title: "index",
url: getHttpPrefix + "index.html"
};
window.history.pushState(state, "index", getHttpPrefix + "index.html");
state = {
title: "index",
url: ""
};
window.history.pushState(state, "index", "");
}
}
将上述代码加入页面的ready事件中即可生效：
setTimeout(function () {
pushHistory()
window.addEventListener("popstate", function (e) { 5 if (window.history.state !=null&&window.history.state.url != "") {
location.href = window.history.state.url
}
});
}, 300);
其核心逻辑是判断浏览器历史栈中是否存在前一个页面记录。若不存在，则通过pushState将指定网站（如首页）的链接插入state对象中，随后监听popstate事件以执行相应的跳转操作。
该代码可能存在一些潜在问题，故在此提出，希望有经验的开发者能共同讨论并完善。
便捷Log调试方法
2、便捷的Log调试方法
在页面调试过程中，频繁输入console.log()显得繁琐。虽然部分编辑器支持快捷输入（如输入cl自动补全），但在项目发布时，往往难以彻底清除所有遗留的调试信息。为此，封装了一个专门处理此类情况的方法。
function lll() {
//全局变量_debug用来控制调试信息开关
if (_debug) {
var arr = [];
//arguments是方法的参数集合 这样做是为了不限制参数的个数，方便调试
for (_item in arguments) {
//由于个人习惯字符串信息就显示在一行里所以对字符串进行了筛选拼接
if (typeof _item == "String") {
arr.push(_item)
} else {
console.log(_item)
}
}
if(arr.length>0)console.log(arr.join(','))
}
}
目前该方法的一个不足之处是无法自动获取参数名，否则使用体验会更佳，例如：
var a = 123, b = 333, obj = { name: "name", content: "..." }
lll(a, b, obj)//调试信息为： a:123,b:123
//obj:
//{ name: "name", content: "..." }
这样输出是否更加直观清晰？
获取浏览器定位信息
3、获取浏览器定位信息（支持移动端）
许多项目涉及移动端定制开发，因此经常需要获取当前地理位置信息。
网络上常见的解决方案通常需要引入外部JavaScript库，如百度地图API或微信JSSDK等。
接下来介绍一种无需引入外部JS文件，仅需向外部API链接提交参数即可获取定位信息的方法：
if (getCookie('position') == "") {
if (navigator.userAgent.indexOf("MicroMessenger") > -1) {//判断是否是微信端，具体视情况而定
navigator.geolocation.getCurrentPosition(function getPositionSuccess(position) {
//通过html5的navigator.geolocation接口 获取浏览器的当前定位 （移动端最准确，PC会有较大偏差）
var lat = position.coords.latitude;//获取过来的当前纬度
var lng = position.coords.longitude;//获取过来的当前经度
var arr = []
arr.push(lng)
arr.push(lat)
//alert(position)
$.ajax({
type: "GET",
url: "http://api.map.baidu.com/geocoder/v2/?ak=oM55dVWVwLUU7shkz7uY8M6E&callback=renderReverse&location=" + lat + "," + lng + "&output=json&pois=1",//将经纬度通过地址栏参数的形式 传给百度提供的api
beforeSend: function () {
//由于这段过程需要些时间 所以最好页面上有加载提示
iosload()//本人写的页面加载动画
},
data: {},
dataType: "jsonp",//由于是跨域传输 所以需要以jsonp的形式进行传输
jsonpCallback: "renderReverse",//类似跨域传输的标识 需要接收方和传输方做好统一
success: function (data) {
ios.hide();
//alert(data)
$("#myposition").html("我在：" + data.result.addressComponent.city)
setCookie("position", data.result.addressComponent.city, 24 * 60 * 30)
}
})
}, function (error) {
//alert(error.message);
}, {})
}
}
这段代码源自实际项目。由于需要判断是否已获取定位信息，避免每次页面加载都重新请求，因此使用Cookie保存定位数据。
首先检查是否存在当前定位信息的Cookie，若不存在，再判断设备是否为移动端（因项目针对微信端，故此处仅做了微信端的验证）。
随后调用HTML5提供的接口进行数据传输，并对百度返回的JSONP数据进行处理。由于项目中仅需获取城市信息，故此处仅以获取城市为例进行展示。
获取字符串中的数值部分
4、获取字符串中的数值部分
在项目中，我主要负责功能实现，页面结构多由他人搭建。有时会出现一些难以直接获取标签内数值的复杂DOM结构。
例如：
<div>原价998现在只要
<a>99.8!</a>
</div>
在这种情况下，若要获取其中的998或98等数值，处理起来会较为麻烦。
通过下面提供的方法，可以方便地解决此类问题。
function getNum(text) {
var value = text.replace(/[^(0-9).]/ig, "");
return parseFloat(value);
}该方法代码简短，实质是利用正则表达式进行匹配，将非数字或非小数点的字符替换为空字符串（即删除）。
返回的数据即为所需的数字。最后进行一次浮点数转换，以便后续处理，如保留两位小数或四舍五入等。
获取设备信息与字符串扩展
5、获取设备信息
//#region 获取设备信息
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
//实际使用的时候如下：
if (browser.versions.webKit) {
//为苹果 谷歌内核执行的代码...
}
//#endregion
此处分享一个源自网络、封装为对象的设备信息判断方法，虽非本人原创，但个人觉得非常实用。
因此特意整理出来与大家分享。
字符串扩展方法——以下介绍的都是对String类型数据进行附加的方法
1.将字符串超出指定长度部分隐藏
/*
将字符串以指定长度显示，多余部分以省略号显示（len--显示长度
defaultStr--若字符串为空显示的字符串）
*/
String.prototype.splitString = function (len, defaultStr) {
var result = "";
var str = this.toString()
if (str) {
str = str.trim()
if (str.length > len) {
result = str.substring(0, len) + "...";
}
else {
result = str;
}
}
else {
result = defaultStr;
}
return result;
}
注释已足够简单明了。如有不理解之处欢迎留言，博主看到后一定会回复。
2.将字符串长度减一
//长度减一
String.prototype.delLast = function () {
return this.substring(0, this.length - 1)
}
有人可能认为此方法有些多余，但在实际项目中，此类操作非常常见。
与其编写冗长的substring代码，不如封装一个方法精简代码。编码时只需在对应字符串后轻点，选择delLast即可。
一句话，用过都说好！
3.将数字型字符串补全指定长度
//给数字型字符串固定指定长度
String.prototype.addZero = function (n) {
var num = this
var len = num.toString().length;
while (len < n) {
num = '0' + num;
len++;
}
return num;
}
看注释可能不太理解，实际上若字符串为 "2"，通过此扩展方法可这样操作："2".addZero(2)。
返回结果将是 "02" 这样的字符串。
用过都说好！
4.将数据库DateTime类型转换为Date
String.prototype.DTD = function () {
return new Date(Date.parse(this.toString().replace(/-/g, "/")))
}
5.用户昵称省略
//用户昵称省略
String.prototype.telHide = function () {
var name = this
return name.substr(0, 1) + "****" + name.substring(name.length - 1, name.length)
}以上就是本文的全部内容，希望对大家的学习有所帮助。