【Node.js】深度解析常用核心模块-path模块

简介: 【Node.js】深度解析常用核心模块-path模块

相对路径和绝对路径


相对路径和绝对路径的概念


在这里首先先复习一下相对路径和绝对路径:


  • 绝对路径 : 文件真实的存放位置 (以Web 站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。其实绝对路径与相对路径的不同处,只在于描述目录路径时,所采用的参考点不同。由于对网站上所有文件而言,根目录这个参考点对所有文件都是一样的,因此,运用以根目录为参考点的路径描述方式才会被称之为绝对路径)


  • 相对路径 : 相对于当前位置的路径 (以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对)


路径特殊符号


"./" ------ 代表目前所在的目录,相对路径

"../" ------ 代表上一层目录,相对路径

"../../" ------ 代表的是上一层目录的上一层目录,相对路径

"/" ------ 代表根目录,绝对路径

"C:/users/" ------ 代表根目录,绝对路径


示例:


一般情况下我们不会去使用绝对路径引入文件,一般使用相对路径,因为相对路径会更加的灵活,以及在书写的项目上线的时候使用绝对路径将很麻烦,相对路径yyds!


现在需要实现一个小功能,将该图片以不同形式引入到html文件中:

0.png


  • 绝对路径



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 1200px;
        height: 700px;
    }
</style>
<body>
    <img src="/image/23on23-01_2.jpg" alt="">
</body>
</html>


在这里使用了路径符号/,/这个符号代表了根目录(D:/node复盘/03)。


  • 相对路径



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 1200px;
        height: 700px;
    }
</style>
<body>
    <img src="./image/23on23-01_2.jpg" alt="">
</body>
</html>


在这里使用了路径符号./,./代表了目前所在的目录(D:/node复盘/03)。


成功引入:

8bc95c95cd4843c097f4fb08928a8233.png


path 路径模块


什么是path路径模块


path 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理需求。


获取路径名path.dirname()

返回 path 的目录名。 尾部的目录分隔符将被忽略。语法格式:

path.dirname(path)


代码示例:


const path = require('path')
console.log(path.dirname(`D:/node/02/hello.js`));  // D:/node/02


这个方法打印出了目录名D:/node/02


路径拼接 path.join()


使用 path.join() 方法,可以把多个路径片段拼接为完整的路径字符串,语法格式如下:

path.join([...paths])


参数解读:


  1. …paths < string > 路径片段的序列
  2. 返回值: < string >


代码示例:



const path = require('path')
//   注意: ../会抵消前面的路径
const pathStr = path.join('/a','/b/c','../','./c','/d')
console.log(pathStr);  //   \a\b\c\d


首先要引入path模块,node中引入模块使用内置的方法require(),如上例中写多个字符串,最后打印出来了\a\b\c\d,就是join的拼接功能,但是在这里要注意一点:../会抵消前面的路径,比如在案例中../抵消了/c


获取路径中文件名 path.basename()


使用 path.basename() 方法,可以获取路径中的最后一部分,常通过该方法获取路径中的文件名,语法格式如下:

path.basename(path[, ext])


参数解读:


  1. path: 文件路径
  2. ext: 文件扩展名


代码示例:



const path = require('path')
// 定义文件的存放路径
const fpath = '/a/b/c/index.html'
const fullName = path.basename(fpath)
console.log(fullName) // index.html
const nameWithoutExt = path.basename(fpath, '.html')
console.log(nameWithoutExt) // index


当没有传入第二个参数的时候,返回的将是路径的最后部分,所以返回了index.html,当第二个参数传入时,将会在第一种情况的基础下裁剪掉第二个参数值,所以返回了index


获取路径中文件扩展名 path.extname()


使用 path.extname() 方法,返回路径中文件的后缀名,即路径中最后一个'.'之后的部分。如果一个路径中并不包含'.'或该路径只包含一个'.' 且这个'.'为路径的第一个字符,则此命令返回空字符串。语法格式如下:

path.extname(path)


参数path:传入的路径


代码示例:



const path = require('path')
const fpath = '/a/b/c/index.html'
const fext = path.extname(fpath)
console.log(fext) // .html


这个方法与上边的方法不同的在于提取了后缀名!


解析为绝对路径 path.resolve()


path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径,语法格式如下:

path.resolve( [from…],to )

注 :将参数to位置的字符解析到一个绝对路径里,[from … ]为选填项,路径源;


参数解读:


  1. from : 源路径
  2. to : 将被解析到绝对路径的字符串


代码示例:



const path = require('path)
path.resolve('/foo/bar', './baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', 'baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', '/baz')   // returns '/baz'
path.resolve('/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','./foo/bar', '../baz')   // returns '/home/foo/baz'
path.resolve('home','foo/bar', '../baz')   // returns '/home/foo/baz'
path.resolve('home', 'foo', 'build','aaaa','aadada','../../..', 'asset') //return '/home/foo/asset'


从后向前,若字符以 / 开头,不会拼接到前面的路径;若以../开头,拼接前面的路径,且不含最后一节路径;若连续出现多个../../..或者../..则忽略前方n(这个n代表的是出现了几个..)个..路径名进行拼接;若以./开头 或者没有符号 则拼接前面路径;


返回相对路径 path.relative(from, to)


path.relative() 方法根据当前工作目录返回 from 到 to 的相对路径。 如果 from 和 to 各自解析到相同的路径(分别调用 path.resolve() 之后),则返回零长度的字符串。

如果将零长度的字符串传入 from 或 to,则使用当前工作目录代替该零长度的字符串。


代码示例:

const path = require('path')
path.relative('/data/orandea/test/aaa', '/data/orandea/impl/bbb');
// 返回: '../../impl/bbb'


该代码表达的是对于from参数来说,to参数的位置是在哪里,通过解析后得出../../impl/bbb


小结


node的内置模块中path模块的实战操作在于当你需要获取文件的名称时候可以达到灵活使用的目的,一般情况下我们只需要文章的前四种方法,最后两种方法是对path模块的一个小拔高,继续加油吧!


相关文章
|
9月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
257 57
|
2月前
|
JavaScript 前端开发
在Node.js中,如何合理使用模块来避免全局变量的问题?
在Node.js中,如何合理使用模块来避免全局变量的问题?
158 71
|
1月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
79 19
|
2月前
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
4月前
|
数据采集 前端开发 JavaScript
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
111 17
|
4月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
存储 JavaScript 前端开发
全网最全情景,深入浅出解析JavaScript数组去重:数值与引用类型的全面攻略
如果是基础类型数组,优先选择 Set。 对于引用类型数组,根据需求选择 Map 或 JSON.stringify()。 其余情况根据实际需求进行混合调用,就能更好的实现数组去重。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
9月前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
181 59
|
8月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
221 17

热门文章

最新文章

推荐镜像

更多
  • DNS