乐闻世界logo
搜索文章和话题

Lodash中有哪些常用的字符串操作方法？请举例说明它们的用法

2月18日 22:00

Lodash提供了丰富的字符串操作方法，以下是Lodash字符串操作的详细解答：

Lodash常用字符串操作方法

1. 字符串大小写转换

_.camelCase([string=''])

将字符串转换为驼峰命名。

javascript
_.camelCase('Foo Bar');
// => 'fooBar'

_.camelCase('--foo-bar--');
// => 'fooBar'

_.camelCase('__FOO_BAR__');
// => 'fooBar'

// 实际应用：将API响应转换为驼峰命名
function convertToCamelCase(obj) {
  return _.mapKeys(obj, (value, key) => _.camelCase(key));
}

const apiResponse = {
  'first_name': 'John',
  'last_name': 'Doe',
  'user_age': 30
};

const camelCaseObj = convertToCamelCase(apiResponse);
// => { firstName: 'John', lastName: 'Doe', userAge: 30 }

_.snakeCase([string=''])

将字符串转换为蛇形命名。

javascript
_.snakeCase('Foo Bar');
// => 'foo_bar'

_.snakeCase('fooBar');
// => 'foo_bar'

_.snakeCase('--foo-bar--');
// => 'foo_bar'

// 实际应用：将对象键转换为蛇形命名用于API请求
function convertToSnakeCase(obj) {
  return _.mapKeys(obj, (value, key) => _.snakeCase(key));
}

const requestData = {
  firstName: 'John',
  lastName: 'Doe',
  userAge: 30
};

const snakeCaseObj = convertToSnakeCase(requestData);
// => { first_name: 'John', last_name: 'Doe', user_age: 30 }

_.kebabCase([string=''])

将字符串转换为短横线命名。

javascript
_.kebabCase('Foo Bar');
// => 'foo-bar'

_.kebabCase('fooBar');
// => 'foo-bar'

_.kebabCase('__FOO_BAR__');
// => 'foo-bar'

// 实际应用：生成CSS类名
function generateClassName(baseName, modifiers) {
  const base = _.kebabCase(baseName);
  return modifiers.map(mod => `${base}--${_.kebabCase(mod)}`).join(' ');
}

const className = generateClassName('userCard', ['active', 'large']);
// => 'user-card--active user-card--large'

_.upperFirst([string=''])

将字符串的首字母转换为大写。

javascript
_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

// 实际应用：格式化用户名
function formatUserName(name) {
  return _.upperFirst(_.toLower(name));
}

console.log(formatUserName('john'));
// => 'John'

console.log(formatUserName('JOHN'));
// => 'John'

_.lowerFirst([string=''])

将字符串的首字母转换为小写。

javascript
_.lowerFirst('Fred');
// => 'fred'

_.lowerFirst('FRED');
// => 'fRED'

_.startCase([string=''])

将字符串转换为首字母大写的格式。

javascript
_.startCase('--foo-bar--');
// => 'Foo Bar'

_.startCase('fooBar');
// => 'Foo Bar'

_.startCase('__FOO_BAR__');
// => 'FOO BAR'

// 实际应用：格式化标题
function formatTitle(title) {
  return _.startCase(title);
}

console.log(formatTitle('hello-world'));
// => 'Hello World'

console.log(formatTitle('user_profile'));
// => 'User Profile'

2. 字符串截取和填充

_.truncate([string=''], [options={}])

截断字符串，添加省略号。

javascript
_.truncate('hi-diddly-ho there, neighborino');
// => 'hi-diddly-ho there, neighbo...'

_.truncate('hi-diddly-ho there, neighborino', {
  'length': 24,
  'separator': ' '
});
// => 'hi-diddly-ho there,...'

_.truncate('hi-diddly-ho there, neighborino', {
  'length': 24,
  'separator': /,? +/
});
// => 'hi-diddly-ho there...'

_.truncate('hi-diddly-ho there, neighborino', {
  'omission': ' [...]'
});
// => 'hi-diddly-ho there, neig [...]'

// 实际应用：截断文章摘要
function truncateText(text, maxLength = 100) {
  return _.truncate(text, {
    length: maxLength,
    separator: ' ',
    omission: '...'
  });
}

const article = 'This is a long article that needs to be truncated for display purposes...';
const summary = truncateText(article, 50);
// => 'This is a long article that needs to be...'

_.pad([string=''], [length=0], [chars=' '])

在字符串两侧填充字符。

javascript
_.pad('abc', 8);
// => '  abc   '

_.pad('abc', 8, '_-');
// => '_-abc_-_'

_.pad('abc', 3);
// => 'abc'

_.padStart([string=''], [length=0], [chars=' '])

在字符串左侧填充字符。

javascript
_.padStart('abc', 6);
// => '   abc'

_.padStart('abc', 6, '_-');
// => '_-_abc'

_.padStart('abc', 3);
// => 'abc'

// 实际应用：格式化数字
function formatNumber(num, length = 6) {
  return _.padStart(String(num), length, '0');
}

console.log(formatNumber(42));
// => '000042'

console.log(formatNumber(123456));
// => '123456'

_.padEnd([string=''], [length=0], [chars=' '])

在字符串右侧填充字符。

javascript
_.padEnd('abc', 6);
// => 'abc   '

_.padEnd('abc', 6, '_-');
// => 'abc-_-'

_.padEnd('abc', 3);
// => 'abc'

3. 字符串分割和连接

_.split([string=''], [separator], [limit])

将字符串分割成数组。

javascript
_.split('a-b-c', '-', 2);
// => ['a', 'b']

_.split('a-b-c', '-');
// => ['a', 'b', 'c']

// 实际应用：解析路径
function parsePath(path) {
  return _.split(path, '/').filter(Boolean);
}

console.log(parsePath('/users/123/posts'));
// => ['users', '123', 'posts']

_.words([string=''], [pattern])

将字符串分割成单词数组。

javascript
_.words('fred, barney, & pebbles');
// => ['fred', 'barney', 'pebbles']

_.words('fred, barney, & pebbles', /[^, ]+/g);
// => ['fred', 'barney', '&', 'pebbles']

// 实际应用：统计单词数量
function countWords(text) {
  return _.words(text).length;
}

console.log(countWords('Hello world, this is a test'));
// => 6

4. 字符串清理

_.trim([string=''], [chars=whitespace])

移除字符串两端的空白字符。

javascript
_.trim('  abc  ');
// => 'abc'

_.trim('-_-abc-_-', '_-');
// => 'abc'

// 实际应用：清理用户输入
function cleanInput(input) {
  return _.trim(input);
}

console.log(cleanInput('  john@example.com  '));
// => 'john@example.com'

_.trimStart([string=''], [chars=whitespace])

移除字符串开头的空白字符。

javascript
_.trimStart('  abc  ');
// => 'abc  '

_.trimStart('-_-abc-_-', '_-');
// => 'abc-_-'

_.trimEnd([string=''], [chars=whitespace])

移除字符串末尾的空白字符。

javascript
_.trimEnd('  abc  ');
// => '  abc'

_.trimEnd('-_-abc-_-', '_-');
// => '-_-abc'

_.deburr([string=''])

移除字符串中的变音符号。

javascript
_.deburr('déjà vu');
// => 'deja vu'

_.deburr('Juan José');
// => 'Juan Jose'

// 实际应用：创建搜索友好的字符串
function createSearchString(text) {
  return _.deburr(_.toLower(text));
}

console.log(createSearchString('Café au Lait'));
// => 'cafe au lait'

5. 字符串重复

_.repeat([string=''], [n=1])

重复字符串n次。

javascript
_.repeat('*', 3);
// => '***'

_.repeat('abc', 2);
// => 'abcabc'

_.repeat('abc', 0);
// => ''

// 实际应用：创建分隔线
function createSeparator(char = '-', length = 50) {
  return _.repeat(char, length);
}

console.log(createSeparator('=', 30));
// => '=============================='

6. 字符串模板

_.template([string=''], [options={}])

创建一个编译后的模板函数。

javascript
// 使用默认的"interpolate"分隔符
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

// 使用HTML"escape"分隔符
var compiled = _.template('<b><%- value %></b>');
compiled({ 'value': '<script>' });
// => '<b>&lt;script&gt;</b>'

// 使用"evaluate"分隔符
var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'

// 使用自定义分隔符
var compiled = _.template('<% if (value) { %>Yes<% } else { %>No<% } %>', { 'imports': { 'value': true } });
compiled();
// => 'Yes'

// 实际应用：HTML模板
function createTemplate(templateString) {
  return _.template(templateString);
}

const userTemplate = createTemplate(`
  <div class="user-card">
    <h2><%= name %></h2>
    <p>Email: <%= email %></p>
    <p>Age: <%= age %></p>
  </div>
`);

const html = userTemplate({
  name: 'John Doe',
  email: 'john@example.com',
  age: 30
});

7. 字符串检查

_.endsWith([string=''], [target], [position=string.length])

检查字符串是否以指定字符串结尾。

javascript
_.endsWith('abc', 'c');
// => true

_.endsWith('abc', 'b');
// => false

_.endsWith('abc', 'b', 2);
// => true

// 实际应用：检查文件扩展名
function hasExtension(filename, extension) {
  return _.endsWith(filename, '.' + extension);
}

console.log(hasExtension('document.pdf', 'pdf'));
// => true

console.log(hasExtension('image.jpg', 'png'));
// => false

_.startsWith([string=''], [target], [position=0])

检查字符串是否以指定字符串开头。

javascript
_.startsWith('abc', 'a');
// => true

_.startsWith('abc', 'b');
// => false

_.startsWith('abc', 'b', 1);
// => true

// 实际应用：检查URL协议
function isSecureUrl(url) {
  return _.startsWith(url, 'https://');
}

console.log(isSecureUrl('https://example.com'));
// => true

console.log(isSecureUrl('http://example.com'));
// => false

8. 字符串替换

_.replace([string=''], pattern, replacement)

替换字符串中的匹配项。

javascript
_.replace('Hi Fred', 'Fred', 'Barney');
// => 'Hi Barney'

// 实际应用：替换模板变量
function replaceTemplate(template, data) {
  let result = template;
  _.forOwn(data, (value, key) => {
    result = _.replace(result, new RegExp(`{{${key}}}`, 'g'), value);
  });
  return result;
}

const template = 'Hello {{name}}, your order {{orderId}} is ready.';
const result = replaceTemplate(template, {
  name: 'John',
  orderId: '12345'
});
// => 'Hello John, your order 12345 is ready.'

实际应用示例

URL参数处理

javascript
class URLHelper {
  static buildQuery(params) {
    return _.chain(params)
      .pickBy(value => value != null)
      .mapValues(value => String(value))
      .toPairs()
      .map(([key, value]) => `${_.kebabCase(key)}=${encodeURIComponent(value)}`)
      .join('&')
      .value();
  }

  static parseQuery(queryString) {
    return _.chain(queryString)
      .split('&')
      .filter(Boolean)
      .map(pair => pair.split('='))
      .fromPairs()
      .mapValues(value => decodeURIComponent(value))
      .mapKeys(key => _.camelCase(key))
      .value();
  }
}

const params = {
  userId: 123,
  sortOrder: 'desc',
  pageSize: 10
};

const queryString = URLHelper.buildQuery(params);
// => 'user-id=123&sort-order=desc&page-size=10'

const parsedParams = URLHelper.parseQuery(queryString);
// => { userId: '123', sortOrder: 'desc', pageSize: '10' }

文件名处理

javascript
class FileNameHelper {
  static sanitize(filename) {
    return _.chain(filename)
      .deburr()
      .replace(/[^\w\s-]/g, '')
      .trim()
      .replace(/[-\s]+/g, '-')
      .toLower()
      .value();
  }

  static getExtension(filename) {
    const parts = _.split(filename, '.');
    return parts.length > 1 ? _.last(parts) : '';
  }

  static getBaseName(filename) {
    const parts = _.split(filename, '.');
    return parts.length > 1 ? _.initial(parts).join('.') : filename;
  }
}

const filename = 'My Document (Final).pdf';
const sanitized = FileNameHelper.sanitize(filename);
// => 'my-document-final.pdf'

const extension = FileNameHelper.getExtension(sanitized);
// => 'pdf'

const baseName = FileNameHelper.getBaseName(sanitized);
// => 'my-document-final'

文本格式化

javascript
class TextFormatter {
  static toTitleCase(text) {
    return _.startCase(_.toLower(text));
  }

  static truncate(text, maxLength) {
    return _.truncate(text, {
      length: maxLength,
      separator: ' ',
      omission: '...'
    });
  }

  static slugify(text) {
    return _.chain(text)
      .deburr()
      .toLower()
      .replace(/[^\w\s-]/g, '')
      .trim()
      .replace(/[-\s]+/g, '-')
      .value();
  }

  static capitalizeWords(text) {
    return _.chain(text)
      .split(' ')
      .map(_.upperFirst)
      .join(' ')
      .value();
  }
}

const text = 'hello world, this is a test';
console.log(TextFormatter.toTitleCase(text));
// => 'Hello World, This Is A Test'

console.log(TextFormatter.truncate(text, 20));
// => 'hello world, this...'

console.log(TextFormatter.slugify('Hello World!'));
// => 'hello-world'

console.log(TextFormatter.capitalizeWords('hello world'));
// => 'Hello World'

总结

Lodash提供了丰富的字符串操作方法，涵盖了字符串大小写转换、截取和填充、分割和连接、清理、重复、模板、检查和替换等各个方面。掌握这些方法可以大大提高字符串处理的效率和代码的可读性。在实际开发中，建议根据具体需求选择合适的方法，并充分利用链式调用来简化代码。

标签：Lodash
热门标签
更多
Git(114)C语言(23)C++(15)前端(148)React(32)JavaScript(56)Linux(20)Rust(10)Docker(65)Cypress(4)TypeScript(23)Tailwind CSS(29)Vue(13)CSS(19)网络(12)MySQL(7)TypeORM(31)Next.js(30)