在这里首先先复习一下相对路径和绝对路径:
"./"
------ 代表目前所在的目录,相对路径
"../"
------ 代表上一层目录,相对路径
"../../"
------ 代表的是上一层目录的上一层目录,相对路径
"/"
------ 代表根目录,绝对路径
"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 模块是 Node.js 官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理需求。
返回 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([...paths])
参数解读:
代码示例:
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[, 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)
参数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( [from…],to )
注 :将参数to位置的字符解析到一个绝对路径里,[from … ]为选填项,路径源;
参数解读:
代码示例:
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 的相对路径。 如果 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模块的一个小拔高