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

news2024/11/19 9:41:17

✅ 作者简介:一名将要迈入大三的大学生,致力于提高前端开发能力
✨ 个人主页:前端小白在前进的主页
🔥 系列专栏 : node.js学习专栏
⭐️ 个人社区 : 个人交流社区
🍀 学习格言: ☀️ 打不倒你的会使你更强!☀️

🔥前言

在node.js中常用的三大模块中还有一个是path模块,主要是为了便利用户处理路径问题,如果我们在引入文件的时候经常会受到.././的干扰,那么这个path模块将会很好的帮助你!

📃目录

  • 相对路径和绝对路径
    • 相对路径和绝对路径的概念
    • 路径特殊符号
  • path 路径模块
    • 什么是path路径模块
    • 获取路径名path.dirname()
    • 路径拼接 path.join()
    • 获取路径中文件名 path.basename()
    • 获取路径中文件扩展名 path.extname()
    • 解析为绝对路径 path.resolve()
    • 返回相对路径 path.relative(from, to)
  • 小结

相对路径和绝对路径

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

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

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

路径特殊符号

"./" ------ 代表目前所在的目录,相对路径
"../" ------ 代表上一层目录,相对路径
"../../" ------ 代表的是上一层目录的上一层目录,相对路径
"/" ------ 代表根目录,绝对路径
"C:/users/" ------ 代表根目录,绝对路径

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

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

  • 绝对路径
<!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)。

成功引入:
在这里插入图片描述

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模块的一个小拔高,继续加油吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409242.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

本地存储(Local Storage) 和 会话存储(Session Storage)

我不会告诉你任何定义和概念&#xff0c;上车&#xff0c;读完这篇博客&#xff0c;你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识。 目录前提知识范例示例1&#xff1a;将键值对提供给本地存储示例2: 本地存储中设置键值对示例3: 获取空值示…

浏览器链接跳转进入小程序指定页面(适用安卓和iOS)

安卓和ios 浏览器外部链接跳转进入小程序 需求&#xff1a;用户点击链接进入小程序 第一步&#xff1a; 需要后端配合调用微信官方提供的接口方法 生成小程序的链接。 官方文档如下&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-…

async与await异步编程

ECMA2017中新加入了两个关键字async与await 简单来说它们是基于promise之上的的语法糖&#xff0c;可以让异步操作更加地简单明了 首先我们需要用async关键字&#xff0c;将函数标记为异步函数 async function f() {} f()异步函数就是指&#xff1a;返回值为promise对象的函…

IDEA如何完美配置Servlet(适用于IDEA 2022及以下版本)

目录 准备Java文件 导入servlet-api.jar 配置Tomcat服务器 准备Java文件 1.首先新建Java项目 选择新建项目&#xff0c;构建系统选择Maven&#xff0c;点击创建 2.选择添加框架支持&#xff08;英文为Add Framework Support&#xff09; 3.选择添加web应用程序&#xff08;…

dom-to-image

前言 之前的文章&#xff1a;vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题 简单介绍了html2canvas的基本使用&#xff0c;html2canvas 只能截取可视区域&#xff0c;对于含有滚动条的无法完全截取。后来发现还有一个dom-to-image的库可以支持&#xff0c;并且能…

【C#+JavaScript+SQL Server】实现Web端考试系统 六:后台管理模块设计(附源码和资源)

需要源码和资源请点赞关注收藏后评论区留言私信~~~ 一、后台管理模块概述 在线考试系统中&#xff0c;后台管理员模块具有最高权限&#xff0c;管理员通过登录模块成功登录之后&#xff0c;可以对试题信息&#xff0c;教师信息&#xff0c;考生信息&#xff0c;考试科目信息以…

CSS渐变背景看这一篇就够了

CSS渐变背景看这一篇就够了 在我们自己设计网页的时候&#xff0c;为了好看美观&#xff0c;颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景&#xff0c;和一些常用的颜色网站。 CSS 渐变使可以显示两种或多种指定…

Vue Admin Template关闭eslint校验,lintOnSave:false设置无效解决办法

目录 第一步&#xff1a;lintOnSave&#xff1a;false 第二步&#xff1a;修改package.json中的配置 最后一步&#xff1a; 使用Vue Admin Template 二次开发是一件非常愉悦的事情&#xff0c;可是它里面的eslint真的是十分恶心人啊&#xff0c;对此我找了很多方法都没有解决…

浏览器强缓存与协商缓存详解以及实践

"我这边把代码更新上服务器了&#xff0c;你那边看一下呢?" "我这边还有这个问题&#xff0c;你改没改哦?" "我改了啊&#xff0c;不信你看我代码......噢&#xff0c;可能是浏览器缓存问题&#xff0c; 你F5刷新一下试试&#xff0c;如果不行 就Ct…

超星章节内ppt课件下载

超星章节内课件下载 欢迎访问个人博客&#xff1a;www.xuanworld.top 前言 ​ 一般来说&#xff0c;如果老师设置超星学习通章节内的ppt加密&#xff0c;那么ppt是无法下载的&#xff0c;超星不会提供下载接口&#xff0c;但是我们可以通过网络抓包的方式来截取到pdf&#x…

vue-router控制台异常:Uncaught (in promise) Error: Redirected when going from “/“ to “/foo“

qian kun微前端在子应用的路由配置中添加了一个全局前置导航守beforeEach&#xff0c;在前置导航守卫中调用next方法时重写了路由的path&#xff0c;结果控制台每次在路由跳转时都会报异常&#xff0c;但是不影响功能。 这里&#xff0c;我们将这个场景从微前端摘出来&#xf…

uniapp登录拦截器(未登录点击其他地方跳转登录页)

项目场景&#xff1a; 例如&#xff1a;客户要求用户在未登录的情况下&#xff0c;用户只可以在底部导航栏操作&#xff0c;点击其他的的功能都要跳转到登录页面。 uni.addInterceptor拦截器 是uni-app官网提供的拦截器&#xff0c;可以利用它来实现登录拦截器&#xff0c;用户…

vue3+pinia+vuerouter4动态路由菜单

文章目录前言一、用户权限和菜单列表数据二、pinia存储数据状态共享1.创建存储用户详情的user.ts文件2.创建存储用户菜单和权限的menus.ts文件三、设置动态路由1.在router文件夹下面创建routers.ts文件2.设置前置路由守卫3.左侧导航菜单前言 最近在做一个通用后台管理系统的框架…

35.JavaScript对象和数组的解构赋值基础详解、let陷阱、函数参数解构

文章目录35.JavaScript对象和数组的解构赋值数组解构解构不改变原数组忽略数组元素可迭代对象使用解构赋值给任何变量与.entries()方法结合与Map结合变量交换多余的元素对象解构属性变量映射默认值多余的属性let陷阱多层解析函数参数解析总结35.JavaScript对象和数组的解构赋值…

HTML使用Element-UI制作管理系统页面(无需脚手架以及创建vue工程)

HTML正常使用Element-UI前言尝试经历设计附件前言 入职培训到Web前端后布置了一个制作管理系统前端页面的任务&#xff0c;任务要求包含&#xff1a; 1.页面的布局主要为左侧导航菜单栏&#xff0c;右侧为信息展示栏&#xff0c;要体现嵌套 2.点击菜单栏切换右侧信息展示时左侧…

前端在项目中使用mockjs模拟数据的增删改查

背景 在项目开发时&#xff0c;会存在前端界面已经画好了但是后端接口还在开发的情况&#xff0c;此时前端可以先根据接口文档明确自己需要的字段&#xff0c;然后使用mock模拟后端接口进行调试 安装 npm install mockjs 使用 1. 创建vue项目之后&#xff0c;新建一个mock…

基于SpringBoot的校园疫情防控系统设计与实现

1.概述 校园疫情防控系统的开发运用java技术、springboot框架&#xff0c;MIS的总体思想&#xff0c;以及Mysql等技术的支持下共同完成了该系统的开发&#xff0c;实现了校园疫情防控管理的信息化&#xff0c;使用户体验到校园疫情防控管理&#xff0c;管理员管理操作将更加方…

使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据(大类)以及自定义表格合计值

1. 使用 el-table 实现树形数据懒加载 实现必需条件&#xff1a; lazy :load“loadNode” :tree-props“{ children: ‘children’, hasChildren: ‘hasChildren’ }” 注意&#xff1a;特别是第3条&#xff0c;后端接口必须传给你"hasChildren"(名字可以不一样)…

Vue3的vue-router超详细使用

从零开始搭建Vue3环境&#xff08;vitetsvue-router&#xff09;&#xff0c;手拉手做一个router项目搭建vue3环境vue-router入门&#xff08;宝宝模式&#xff09;vue-router基础&#xff08;青年模式&#xff09;一。动态路由匹配1.带参数的动态路由匹配2.捕获所有路由或404 …

uniapp项目中引入vant-Weapp(局部全局都有 史上最详细的方法)

1.先在根目录创建wxcomponents文件夹 2.打开 https://github.com/youzan/vant-weapp 下载最新的vant-Weapp 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉&#xff0c;然后把vant-weapp放到 wxcomponents里面 4.在App.vue引入vant样式 import /wxcomponents…