如何優雅地處理文本大寫？

一、CSS處理文本大寫

CSS提供了text-transform屬性，可以將文本轉換成大寫、小寫、首字母大寫等形式。

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

使用示例：

<p class="uppercase">HELLO WORLD</p> // 輸出為：HELLO WORLD
<p class="lowercase">hello world</p> // 輸出為：hello world
<p class="capitalize">hello world</p> // 輸出為：Hello World

二、JavaScript處理文本大寫

JavaScript提供了字符串的toUpperCase()和toLowerCase()方法，可以將字符串轉換成大寫或小寫形式。

var str = "hello world";
console.log(str.toUpperCase()); // 輸出為：HELLO WORLD
console.log(str.toLowerCase()); // 輸出為：hello world

如果要將字符串的首字母大寫，可以使用以下方法：

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

console.log(capitalize("hello world")); // 輸出為：Hello world

三、Vue.js處理文本大寫

在Vue.js中，可以使用過濾器來處理文本的大小寫。

<div id="app">
  <p>{{ message | uppercase }}</p>
  <p>{{ message | lowercase }}</p>
  <p>{{ message | capitalize }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    uppercase: function(value) {
      return value.toUpperCase();
    },
    lowercase: function(value) {
      return value.toLowerCase();
    },
    capitalize: function(value) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
});

輸出結果：

<p>HELLO WORLD</p>
<p>hello world</p>
<p>Hello world</p>

四、React處理文本大寫

在React中，可以使用JavaScript的字符串處理方式來操作文本的大小寫。

class App extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.message.toUpperCase()}</p>
        <p>{this.props.message.toLowerCase()}</p>
        <p>{this.props.message.charAt(0).toUpperCase() + this.props.message.slice(1)}</p>
      </div>
    );
  }
}

ReactDOM.render(<App message="hello world" />, document.getElementById('root'));

輸出結果：

<p>HELLO WORLD</p>
<p>hello world</p>
<p>Hello world</p>